/* ==========================================================================
   Reset
   ========================================================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
    vertical-align: top;
}

/* Normalise display of HTML5 elements across browsers */
article,aside,figcaption,figure,footer,header,hgroup,nav,section {
    display:block
}

/* Add styling not present in older browsers*/
mark {
    background: #fff59b;
    color: #000;
    padding: 2px 4px;
}

input, select {
    vertical-align: baseline;
}

textarea {
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
}

input[type=text],
input[type=password],
textarea {
    font-size: 12px;
    background: #fff;
    color: #000;
    border: 1px solid #bbb;
    padding: 3px;
}

table {
    font-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border:0;
}

img {
    -ms-interpolation-mode: bicubic;
}

address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal;
}

ol,ul {
    list-style:none;
}

ol.numbered {
    list-style: decimal;
    margin-left: 20px;
}

caption,th {
    text-align:left;
}

h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}

q:before,q:after {
    content:'';
}

abbr,acronym {
    border:0;
}

strong, .strong, b, h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

.norm {
    font-weight: normal;
}

button {
    cursor: pointer;
    overflow: visible;
}

input.submit {
    cursor: pointer;
}

/* Hide the non-javascript version for people with JS  */
.js .nonJs,
.js .non-js {
display: none;
}

/* Hide the javascript version for people without javascript */
.no-js .needsJs,
.no-js .needs-js {
display: none;
}

/* IE6 */

.ie6 {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

.ie6 .transparent_png {
    behavior: url('/pngbehavior2.htc');
}

/* Tools */

.clearit:after,
#content:after,
.clearitItems li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearit,
.clearitItems li,
#content,
#page {
    zoom: 1;
}

.ie6 .clearit {
    height: 1%;
}

.clear {
    clear: both;
}

.inline {
    display: inline;
}

.pushLeft {
    float: left;
    margin-right: 1em;
}

.pushRight {
    float: right;
    margin-left: 1em;
}

.unorphan {
    white-space: nowrap;
}

/* Hide visually, but keep available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  &  h5bp.com/v*/
.rm, .visuallyHidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    z-index: -1;
}

/* Image replacement, hide text, show a background image, keep text for screen readers
   http://nicolasgallagher.com/another-css-image-replacement-technique/ */
.ir {
    font: 0/0 a;
    text-shadow: none;

    /* Forcefully hide text. !important is necessary for Opera which has a minimum font size setting */
    color: transparent !important;
}

/* Hide from everything and everyone, including screen readers
   Be sure this is what you mean. */
.hide {
    display: none;
}

/* Hide only in the case of javascript, overwrites the former */
.no-js .hide--js-only {
    display: block;
}

.styledText ul,
.bbcode ul,
#faqContent ul {
    list-style: disc;
}

.styledText ol,
.bbcode ol,
#faqContent ol {
    list-style: decimal;
}

.styledText li,
.bbcode li,
#faqContent li {
    margin-left: 2em;
}

/* Body styles */

body {
    color: #1b1b1b;
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    font-size: 13px;
    background: #e3e3e3;
}

#page {
    font-size: 12px;
    line-height: 1.5;
    clear: both;
    position: relative;
}

/* Headers */
h1,
.h1 {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    line-height: 1.2em;
}

.l-970 h1,
.l-970 .h1 {
    font-size: 24px;
    margin-bottom: 15px;
}


h2,
.h2 {
    font-size: 14px;
    color: #D51007;
    font-weight: bold;
    line-height: 1.5em;
}

.l-970 h2,
.l-970 .h2 {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #1b1b1b;
    padding-top: 10px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    border-style: dotted;
}

.lfmBlack h2,
.lfmBlack .h2 {
    color: #000;
}

h2 img {
    vertical-align: text-bottom;
}

.l-970 h3,
.l-970 .h3 {
    font-size: 18px;
    line-height: 1.333333;
    font-weight: bold;
    color: #D51007;
    padding-top: 12px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
    border-style: dotted;

    margin-bottom: 0;
}

.l-970 h3 a,
.l-970 .h3 a {
    color: #D51007;
}

.lfmBlack .l-970 .h3,
.lfmBlack .l-970 h3 a {
    color: #1b1b1b;
}

.h3-subtitle {
    font-size: 16px;
}


.l-970 h4,
.l-970 .h4 {
    font-size: 16px;
    line-height: 1.375;
}


h5,
.h5 {
    font-size: 11px;
    color: #000;
    font-weight: bold;
}


/* BASE CSS */

.lite,
a.lite,
a.light {
    color: #666;
}

.very-lite,
a.very-lite {
    color: #999;
}

/* links */

a {
    color: #0187c5;
    text-decoration: none;
}

a:active {
    outline: none;
}

a:hover {
    color: #0187c5;
    text-decoration: underline;
}

a.text {
    color: #000;
}

.inherit,
a.inherit,
a.inherit:hover,
a.inherit:focus {
    color: inherit;
}

a.underline,
.underline a {
    text-decoration: underline;
}

/* misc */

sub,
sup {
    font-size: 0.75em;
    line-height: 0.1;
}

.shoutCount {
    color: #666;
}

#page .hint {
    color: #999;
}

.nowrap {
    white-space: nowrap;
}

small {
    font-size: 10px;
}

/* Notices  */
/* e.g. Friend finder pref, verify user  */

.notice,
.noticeBar {
    padding: 5px 8px;
    background: #fffcca;
    border: solid 1px #fff200;
}

.responsive .noticeBar {
    margin-left: auto;
    margin-right: auto;
    max-width: 938px;
    padding-left: 20px;
    padding-right: 20px;
}

.notice {
    border-radius: 5px;
    margin-bottom: 1em;
}

.noticeBar {
    margin: 10px 0;
    font-size: 12px;
    line-height: 1.5em;
}

/* Extends .noticeBar  */
.dismissable {
    padding-right: 30px;
    position: relative;
}

.dismissable a.close {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
}

.dismissable:hover a.close {
    display: block;
}

/* Message  */

.memo {
    padding: 1em;
    background: #eef5fc;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5em;
}

.memo-warn {
    background: #ffeacc;
}

.memo-grey {
    background-color: #eeeeee;
}

.memo-grey--with-spinner {
    position: relative;
    padding-left: 42px;
}

.memo-grey--with-spinner:before {
    content: "";

    position: absolute;
    top: 13px;
    left: 13px;
    width: 16px;
    height: 16px;

    background-repeat: no-repeat;
    background-image: url(http://cdn.lst.fm/flatness/spinner_16x16_000000_on_eeeeee.gif);
}

/* ==========================================================================
   Common patterns
   ========================================================================== */


/* Hack - should inherit these sizes from responsive, needed where buttons are used
   on old style pages. See SOCIAL-2. */
.non-responsive-shim {
    font-size: 13px;
    line-height: 18px;
}


/* Rounded
   ========================================================================== */

.rounded {
    border-radius: 2px;
}

/* Rounded background cover
   ========================================================================== */

/*
 * Example HTML
 *
 * <a href="#" class="rounded-cover" style="background-image: …">
 *     <img src="" />
 * </a>
 *
 * See also .text-over-image.
 */

.rounded-cover {
    background-size: cover;
    border-radius: 2px;
}

.rounded-cover img {
    display: none;
}

/* No image fallback
   ========================================================================== */

.no-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ccc;
}

.no-image--user-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_user_40.png); }
.no-image--user-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_user_60_g1.png); }
.no-image--user-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_user_140_g2.png); }
.no-image--user-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_user_220_g3.png); }
.no-image--user-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_user_300_g4.png); }

.no-image--artist-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_artist_40.png); }
.no-image--artist-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_artist_60_g1.png); }
.no-image--artist-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_artist_140_g2.png); }
.no-image--artist-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_artist_220_g3.png); }
.no-image--artist-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_artist_300_g4.png); }

.no-image--album-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_album_40.png); }
.no-image--album-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_album_60_g1.png); }
.no-image--album-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_album_140_g2.png); }
.no-image--album-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_album_220_g3.png); }
.no-image--album-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_album_300_g4.png); }

.no-image--track-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_track_40.png); }
.no-image--track-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_track_60_g1.png); }
.no-image--track-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_track_140_g2.png); }
.no-image--track-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_track_220_g3.png); }
.no-image--track-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_track_300_g4.png); }

.no-image--group-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_group_40.png); }
.no-image--group-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_group_60_g1.png); }
.no-image--group-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_group_140_g2.png); }
.no-image--group-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_group_220_g3.png); }
.no-image--group-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_group_300_g4.png); }

.no-image--label-40 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_label_40.png); }
.no-image--label-g1 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_label_60_g1.png); }
.no-image--label-g2 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_label_140_g2.png); }
.no-image--label-g3 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_label_220_g3.png); }
.no-image--label-g4 { background-image: url(http://cdn.lst.fm/flatness/responsive/7/noimage/default_label_300_g4.png); }

/* Cover any sized block with an image
   ========================================================================== */

/*
 * Example HTML, link wrapping optional
 * Image provided either as background inline style or img tag
 * Container size must be defined elsewhere.
 *
 * <a href="#">
 *     <div class="cover-image" [style="background-image…"]>
 *         <img src="" class="cover-image-image" />
 *     </div>
 * </a>
 */

.cover-image {
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    position: relative;

    /* Always fills container */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cover-image-image {
    display: none;
}

/* IE8 doesn't support background-size: cover. Show and scale <img> instead.
   This is a slightly less good crop of the image.
   This check should really use feature detection */
.ie7 .cover-image-image,
.ie8 .cover-image-image {
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    /* Cover element */
    min-width: 100%;
    min-height: 100%;
}

/* The square no content image shouldn't be distorted, fit into space and fill with grey
   Applied when image src matches "noimage" */
.cover-image--no-content {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ccc;
}

/* IE8 doesn't support background-size: contain. */
.ie7 .cover-image--no-content .cover-image-image,
.ie8 .cover-image--no-content .cover-image-image {
    position: static;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}

/* Title over cover image
   ========================================================================== */

/*
 * Example HTML, link wrapping optional, uses .cover-image
 * Container size must be defined elsewhere.
 *
 * <a href="#">
 *     <div class="cover-image" [style="background-image…"]>
 *         <img src="" class="cover-image-image" />
 *         <div class="text-over-image">
 *             <span class="text-over-image-text">Title</span> [<br />]
 *             [<span class="text-over-image-text text-over-image-text--secondary">Optional Additional Text</span>]
 *         </div>
 *     </div>
 * </a>
 */

.text-over-image {
    position: absolute;
    left: 0;

    /* Line breaks will fill element upwards */
    bottom: 0;
}

.text-over-image-text {
    background: #333;
    color: #fff;
    padding: 3px 6px;
    display: inline-block;
}

/* Should follow a line break */
.text-over-image-text--secondary {
    background-color: #71b7e6;
}



/* Media object. See https://github.com/stubbornella/oocss/tree/master/core/media
   ========================================================================== */

/*
 * Example HTML:
 *
 * <div class="media [media--modifier]">
 *    <a href="#" class="media-pull-[left|right]">…</a>
 *    <div class="media-body"></div>
 * </div>
 */

.media {
    display: block;
    margin-bottom: 18px;

    /* Clear container */
    overflow: hidden;
}

.media--overflow-visible {
    overflow: visible;
}

.media--overflow-visible:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.media-pull-left {
    float: left;
    margin-right: 20px;
}

.media-pull-right {
    float: right;
    margin-left: 20px;
}

/* Clear body */
.media-body {
    overflow: hidden;
}

.media-body--overflow-visible {
    overflow: visible;
}



/* Link hook, and media link hook
   ========================================================================== */

/*
 * The pulled link references a link in the main body, but markup means they
 * cannot be part of the same link element. Apply a simple text-decoration to the
 * reference link. Will apply to all child reference links. Be careful with nesting.
 *
 * Reference is one directional.
 * Container must immediately follow link hook. (either .media-body as enforced by the
 * pattern or link-reference-container if generic)
 *
 * Example HTML:
 *
 * <div class="media [media--modifier]">
 *    <a href="#" class="media-pull-[left|right] media-link-hook">…</a>
 *    <div class="media-body">
 *        <a href="#" class="media-link-reference"></a>
 *    </div>
 * </div>
 *
 * <a href="#" class="link-hook">…</a>
 * <div class="link-reference-container">
 *     <a href="#" class="link-reference"></a>
 * </div>
 */

.media-link-hook:hover + .media-body .media-link-reference {
    text-decoration: underline;
}

.link-hook:hover + .link-reference-container .link-reference {
    text-decoration: underline;
}

/* Media used with an icon.
   ========================================================================== */

/* No bottom margin and smaller internal margins */
.media--icon {
    margin-bottom: 0;
}

.media--icon .media-pull-left {
    margin-right: 10px;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.textinput {
    display: inline-block;
    padding: 10px 15px;
    background-color: #fff;
    color: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    line-height: 18px;
    border: 1px solid #999;
}

.textinput--small {
    padding: 5px 10px;
    font-size: 12px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * Example HTML
 *
 * <a href="#" class="btn [btn--modifier]">Some action</a>
 * <button class="btn [btn--modifier]">Some action</button>
 */

.btn {
    border-radius: 2px;
    display: inline-block;
    padding: 11px 15px;
    background-color: #eeeeee; /* grey */
    color: inherit;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* Reset input and button to match plain text btn styles */

input.btn {
    border: none;
    cursor: pointer;
    font-size: 100%;
    white-space: normal;
}

input.btn,
button.btn {
    text-align: left;
    line-height: 18px;
}


/* Block button */
.btn--block {
    display: block;
    text-align: center;
}

.btn:hover {
    text-decoration: none;
    color: inherit;
}

.btn:hover,
.btn:focus {
    background-color: #dddddd;
}

.btn:active {
    background-color: #cccccc;
}

.btn.is-disabled {
    cursor: default;
    color: #999999;
}

.btn.is-disabled:hover,
.btn.is-disabled:focus,
.btn.is-disabled:active {
    background-color: #eeeeee;
}

/* Small button
   ========================================================================== */

.btn--small {
    padding: 6px 10px;
    font-size: 12px;
}

/* Primary button
   ========================================================================== */

.btn--primary {
    background-color: #333333; /* dark grey */
    color: #fff;
}

.btn--primary:hover,
.btn--primary:focus {
    background-color: #222222; /* darker grey */
    color: #fff;
}

.btn--primary:active {
    background-color: #101010; /* practically black */
}

.btn--primary.is-disabled {
    color: #999999;
}

.btn--primary.is-disabled:hover,
.btn--primary.is-disabled:focus,
.btn--primary.is-disabled:active {
    background-color: #333333; /* dark grey */
}

/* Branded button (using reds from the ticket logo)
   ========================================================================== */

.btn--brand {
    background-color: #be0d1d; /* red */
    color: #fff;
}

.btn--brand:hover,
.btn--brand:focus {
    background-color: #ab0c1a; /* darker red */
    color: #fff;
}

.btn--brand:active {
    background-color: #9a0b17; /* darker still */
}

/* On button (using blue from toggles and tags)
   ========================================================================== */

.btn--brand-blue {
    background-color: #0187c5; /* blue */
    color: #fff;
}

.btn--brand-blue:hover,
.btn--brand-blue:focus {
    background-color: #0179b1; /* darker blue */
    color: #fff;
}

.btn--brand-blue:active {
    background-color: #016c9e; /* darker still */
}

/* Moderation button
   ========================================================================== */

.btn--moderation {
    background-color: #999;
    color: #eeeeee;
}

.btn--moderation:hover,
.btn--moderation:focus {
    background-color: #777;
    color: #eeeeee;
}

/* Button structure
   ========================================================================== */

/* basically hides the text by making zero width, zero line height and with a non
   existant font family, also removes text shadow if any has been supplied */
.btn--icon-only,
.btn.iconleft.btn--icon-only,
.btn.iconright.btn--icon-only {
    font: 0/0 a;
    text-shadow: none;

    /* Forcefully hide text. !important is necessary for Opera which has a minimum font size setting */
    color: transparent !important;

    vertical-align: top;
    padding-left: 0;

    /* Warning IE8 doesn't combine border-box and min-width
       http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers */
    width: 40px;
    height: 40px;
}

.btn--icon-only span {
    color: transparent !important;
}

.btn--small.btn--icon-only,
.btn.iconleft.btn--small.btn--icon-only,
.btn.iconright.btn--small.btn--icon-only {
    width: 30px;
    height: 30px;
    padding-left: 0;
}

.btn--full-width {
    width: 100%;
}

/* Toggle buttons
   ========================================================================== */

.btn--toggle-on,
.btn--toggle-on:focus,
.btn--toggle-on:hover {
    background-color: #0187c5;
    color: #fff;
}

.btn--toggle-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.btn--toggle-middle {
    border-radius: 0;
    margin-right: -1px;
    margin-left: -1px;
}

.btn--toggle-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.toggle-list li {
    display: inline;
}

/* Dropdown button
   ========================================================================== */

.dropdown-btn-wrapper {
    position: relative;
}

.dropdown-btn {
    display: block;
}

.active .dropdown-btn {
    border-radius: 2px 2px 0 0;
}

.dropdown-btn-menu {
    display: none;
    position: absolute;
    z-index: 10000;
    background-color: #f6f6f6;
    border: 1px solid #d9d9d9;
    margin-left: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 6px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.dropdown-btn-menu--small {
    font-size: 12px;
}

.dropdown-btn-menu-item {
    line-height: 30px;
    color: #000;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-btn-menu-item:hover {
    background-color: #ddd;
    text-decoration: none;
    color: #000;
}

.dropdown-btn-section-title {
    color: #a1a1a1;
    font-size: 0.9em;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.dropdown-btn-menu-divider {
    border-bottom: 1px solid #d9d9d9;
    margin: 6px 0;
}

.dropdown-btn-menu-item--selected,
.dropdown-btn-menu-item--selected:hover,
.dropdown-btn-menu-item--selected:focus {
    background: #333333;
    color: #fff;
}

/* Social dropdown items (share button) */
.dropdown-btn-menu-item.social-btn {
    padding-left: 39px;
    display: block;
}

/* User action buttons - handle stretching buttons
   ========================================================================== */

.user-actions {
    position: relative;
    display: table;
    width: 100%;
}

.user-actions-btn-wrap {
    display: table-cell;
}

.user-actions-btn-wrap--add {
    width: 100%;
}

.user-actions.with-station-button .user-actions-btn-wrap--add {
    width: auto;
}

.user-actions .btn {
    margin-right: 4px;
    margin-bottom: 3px;
}

.user-actions--play {
    width: 100%;
}

.user-actions .stationbutton {
    width: 100%;
    margin-right: 0;
}


/* Social buttons (Facebook, Twitter, Google)
   ========================================================================== */

.social-btn {
    position: relative;
    min-width: 21px; /* 16px + 5px spacing */
    display: inline-block;
}

.social-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 39px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url(http://cdn.lst.fm/flatness/responsive/7/social_16_sprite.png);
    background-position: 10px 5px;
}

.social-btn--facebook:before {
    background-position: 10px -25px;
}

.social-btn--google:before {
    background-position: 10px -55px;
}

.social-btn--lastfm:before {
    background-position: 10px -85px;
}

.social-btn--email:before {
    background-position: 10px -115px;
}

/* Share button social icon positioning */
.social-icons-wrapper {
    position: absolute;
    right: 62px;
    top: -8px;
    display: none; /* CATA-537 Google content experiment */
}

/* CATA-537 Google content experiment */
.share-icons--enabled .social-icons-wrapper {
    display: block;
}

/* ==========================================================================
   Icons (and icons + buttons, icons + memo)
   ========================================================================== */

.iconleft,
.iconright {
    position: relative;
}

.iconleft:before,
.iconright:after {
    content: "";

    position: absolute;
    top: 50%;

    width: 20px;
    height: 40px;

    margin-top: -20px;

    background-image: url(http://cdn.lst.fm/flatness/responsive/7/icons_16_dark_sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.iconleft:before {
    left: 0;
}

.btn.iconleft:before,
.memo.iconleft:before {
    left: 10px;
}

.btn--small.iconleft:before {
    left: 7px;
}

.iconright:after {
    right: 0;
}

.btn.iconright:after,
.memo.iconright:after {
    right: 10px;
}

.btn--small.iconright:after {
    right: 7px;
}


.iconleft--small.iconleft:before,
.iconright--small.iconright:after,
.btn--small.iconleft:before,
.btn--small.iconright:after {
    background-image: url(http://cdn.lst.fm/flatness/responsive/7/icons_12_dark_sprite.png);
    width: 16px;
    height: 30px;
    margin-top: -15px;
}

.iconleft--light.iconleft:before,
.iconright--light.iconright:after,
.btn--primary.iconleft:before,
.btn--primary.iconright:after,
.btn--brand.iconleft:before,
.btn--brand.iconright:after,
.btn--brand-blue.iconleft:before,
.btn--brand-blue.iconright:after,
.btn--moderation.iconleft:before,
.btn--moderation.iconright:after,
.tags .iconleft:before,
.tags .iconright:after {
    background-image: url(http://cdn.lst.fm/flatness/responsive/7/icons_16_light_sprite.png);
}

.iconleft--small.iconleft--light.iconleft:before,
.iconright--small.iconright--light.iconright:after,
.btn--small.btn--primary.iconleft:before,
.btn--small.btn--primary.iconright:after,
.btn--small.btn--brand.iconleft:before,
.btn--small.btn--brand.iconright:after,
.btn--small.btn--brand-blue.iconleft:before,
.btn--small.btn--brand-blue.iconright:after,
.btn--small.btn--moderation.iconleft:before,
.btn--small.btn--moderation.iconright:after,
.tags .btn--small.iconleft:before,
.tags .btn--small.iconright:after {
    background-image: url(http://cdn.lst.fm/flatness/responsive/7/icons_12_light_sprite.png);
}

.iconleft {
    padding-left: 30px;
}

.btn.iconleft,
.memo.iconleft {
    padding-left: 40px;
}

.iconleft--small.iconleft {
    padding-left: 20px;
}

.btn--small.iconleft {
    padding-left: 30px;
}

.iconright {
    padding-right: 30px;
}

.btn.iconright,
.memo.iconright {
    padding-right: 40px;
}

.iconright--small.iconright {
    padding-right: 20px;
}

.btn--small.iconright {
    padding-right: 30px;
}

.iconleft.is-disabled:before,
.iconright.is-disabled:after {
    opacity: 0.4;
}

/* Big sprite. top = -30 * i + 10 */
.iconleft--love:before          , .iconright--love:after          { background-position: 0  10px; }
.iconleft--broken-love:before   , .iconright--broken-love:after   { background-position: 0 -20px; }
.iconleft--add:before           , .iconright--add:after           { background-position: 0 -50px; }
.iconleft--play:before          , .iconright--play:after          { background-position: 0 -80px; }
.iconleft--tag:before           , .iconright--tag:after           { background-position: 0 -110px; }
.iconleft--artist:before        , .iconright--artist:after        { background-position: 0 -140px; }
.iconleft--right:before         , .iconright--right:after         { background-position: 0 -170px; }
.iconleft--left:before          , .iconright--left:after          { background-position: 0 -200px; }
.iconleft--up:before            , .iconright--up:after            { background-position: 0 -230px; }
.iconleft--down:before          , .iconright--down:after          { background-position: 0 -260px; }
.iconleft--ecommerce:before     , .iconright--ecommerce:after     { background-position: 0 -290px; }
.iconleft--user:before          , .iconright--user:after          { background-position: 0 -320px; }
.iconleft--download:before      , .iconright--download:after      { background-position: 0 -350px; }
.iconleft--share:before         , .iconright--share:after         { background-position: 0 -380px; }
.iconleft--question:before      , .iconright--question:after      { background-position: 0 -410px; }
.iconleft--labs:before          , .iconright--labs:after          { background-position: 0 -440px; }
.iconleft--delete:before        , .iconright--delete:after        { background-position: 0 -470px; }
.iconleft--thumbs-up:before     , .iconright--thumbs-up:after     { background-position: 0 -500px; }
.iconleft--thumbs-down:before   , .iconright--thumbs-down:after   { background-position: 0 -530px; }
.iconleft--search:before        , .iconright--search:after        { background-position: 0 -560px; }
.iconleft--calendar:before      , .iconright--calendar:after      { background-position: 0 -590px; }
.iconleft--globe:before         , .iconright--globe:after         { background-position: 0 -620px; }

/* Small sprite. Weiredly based around 25/26 - you might have to tweak manually */
.iconleft--small.iconleft--love:before          , .btn--small.iconleft--love:before           , .iconright--small.iconright--love:after         , .btn--small.iconright--love:after        { background-position: 0 7px; }
.iconleft--small.iconleft--broken-love:before   , .btn--small.iconleft--broken-love:before    , .iconright--small.iconright--broken-love:after  , .btn--small.iconright--broken-love:after { background-position: 0 -19px; }
.iconleft--small.iconleft--add:before           , .btn--small.iconleft--add:before            , .iconright--small.iconright--add:after          , .btn--small.iconright--add:after         { background-position: 0 -45px; }
.iconleft--small.iconleft--play:before          , .btn--small.iconleft--play:before           , .iconright--small.iconright--play:after         , .btn--small.iconright--play:after        { background-position: 0 -71px; }
.iconleft--small.iconleft--tag:before           , .btn--small.iconleft--tag:before            , .iconright--small.iconright--tag:after          , .btn--small.iconright--tag:after         { background-position: 0 -96px; }
.iconleft--small.iconleft--artist:before        , .btn--small.iconleft--artist:before         , .iconright--small.iconright--artist:after       , .btn--small.iconright--artist:after      { background-position: 0 -123px; }
.iconleft--small.iconleft--right:before         , .btn--small.iconleft--right:before          , .iconright--small.iconright--right:after        , .btn--small.iconright--right:after       { background-position: 0 -149px; }
.iconleft--small.iconleft--left:before          , .btn--small.iconleft--left:before           , .iconright--small.iconright--left:after         , .btn--small.iconright--left:after        { background-position: 0 -175px; }
.iconleft--small.iconleft--up:before            , .btn--small.iconleft--up:before             , .iconright--small.iconright--up:after           , .btn--small.iconright--up:after          { background-position: 0 -200px; }
.iconleft--small.iconleft--down:before          , .btn--small.iconleft--down:before           , .iconright--small.iconright--down:after         , .btn--small.iconright--down:after        { background-position: 0 -227px; }
.iconleft--small.iconleft--ecommerce:before     , .btn--small.iconleft--ecommerce:before      , .iconright--small.iconright--ecommerce:after    , .btn--small.iconright--ecommerce:after   { background-position: 0 -253px; }
.iconleft--small.iconleft--user:before          , .btn--small.iconleft--user:before           , .iconright--small.iconright--user:after         , .btn--small.iconright--user:after        { background-position: 0 -279px; }
.iconleft--small.iconleft--download:before      , .btn--small.iconleft--download:before       , .iconright--small.iconright--download:after     , .btn--small.iconright--download:after    { background-position: 0 -304px; }
.iconleft--small.iconleft--share:before         , .btn--small.iconleft--share:before          , .iconright--small.iconright--share:after        , .btn--small.iconright--share:after       { background-position: 0 -331px; }
.iconleft--small.iconleft--question:before      , .btn--small.iconleft--question:before       , .iconright--small.iconright--question:after     , .btn--small.iconright--question:after    { background-position: 0 -357px; }
.iconleft--small.iconleft--labs:before          , .btn--small.iconleft--labs:before           , .iconright--small.iconright--labs:after         , .btn--small.iconright--labs:after        { background-position: 0 -382px; }
.iconleft--small.iconleft--delete:before        , .btn--small.iconleft--delete:before         , .iconright--small.iconright--delete:after       , .btn--small.iconright--delete:after      { background-position: 0 -408px; }
.iconleft--small.iconleft--thumbs-up:before     , .btn--small.iconleft--thumbs-up:before      , .iconright--small.iconright--thumbs-up:after    , .btn--small.iconright--thumbs-up:after   { background-position: 0 -434px; }
.iconleft--small.iconleft--thumbs-down:before   , .btn--small.iconleft--thumbs-down:before    , .iconright--small.iconright--thumbs-down:after  , .btn--small.iconright--thumbs-down:after { background-position: 0 -460px; }
.iconleft--small.iconleft--search:before        , .btn--small.iconleft--search:before         , .iconright--small.iconright--search:after       , .btn--small.iconright--search:after      { background-position: 0 -486px; }
.iconleft--small.iconleft--calendar:before      , .btn--small.iconleft--calendar:before       , .iconright--small.iconright--calendar:after     , .btn--small.iconright--calendar:after    { background-position: 0 -512px; }
.iconleft--small.iconleft--globe:before         , .btn--small.iconleft--globe:before          , .iconright--small.iconright--globe:after        , .btn--small.iconright--globe:after       { background-position: 0 -538px; }

/* Love has an additional 'is-loved' state that applies the broken heart on hover */

.iconleft--love.is-loved:hover:before,
.iconleft--love.is-loved:focus:before,
.iconright--love.is-loved:hover:after,
.iconright--love.is-loved:focus:after {
    background-position: 0 -20px;
}

.iconleft--small.iconleft--love.is-loved:hover:before,
.iconleft--small.iconleft--love.is-loved:focus:before,
.iconright--small.iconright--love.is-loved:hover:after,
.iconright--small.iconright--love.is-loved:focus:after {
    background-position: 0 -19px;
}


/* The 'is-just-loved' state stops the broken heart hover state being applied after it has been loved */

.iconleft--love.is-just-loved:hover:before,
.iconleft--love.is-just-loved:focus:before,
.iconright--love.is-just-loved:hover:after,
.iconright--love.is-just-loved:focus:after {
    background-position: 0 10px;
}

.iconleft--small.iconleft--love.is-just-loved:hover:before,
.iconleft--small.iconleft--love.is-just-loved:focus:before,
.iconright--small.iconright--love.is-just-loved:hover:after,
.iconright--small.iconright--love.is-just-loved:focus:after {
    background-position: 0 7px;
}

/* 'dropdown' is used instead of 'down' as it has up and down states, @see DropDownMenu JS Module */

.iconright--dropdown:after {
    background-position: 0 -260px;
}

.iconright--small.iconright--dropdown:after,
.btn--small.iconright--dropdown:after {
    background-position: 0 -227px;
}

.active .iconright--dropdown:after {
    background-position: 0 -230px;
}

.active .iconright--small.iconright--dropdown:after,
.active .btn--small.iconright--dropdown:after {
    background-position: 0 -200px;
}


/* Lazylazyloading
   ========================================================================== */

.needs-to-be-lazylazyloaded {
    display: none;
}

.lazylazyloading-container .needs-to-be-lazylazyloaded {
    display: inline;
}


/* Structure */

html {
    overflow-x: auto;
    width: 100%;
}

body {
    width: 100%;
    height: 1%;
}

/* ==========================================================================
   Legacy page layouts
   Below here be monsters.
   ========================================================================== */

body #page,
.cookie-law-bar-innerwrap {
    margin: 0 auto;
    width: 980px;
    position: relative;
}

#content {
    position: relative;
    clear: both;
    margin-top: -1px;
    min-height: 500px;
    background: #fff;
    overflow: visible;
    border: 1px solid #ccc;
}

/* ==========================================================================
   Classic and fixed
   ========================================================================== */

div.sic #content {
    padding: 0 15px 15px 15px;
}

div.fixed div.fullWidth {
    clear: both;
    margin: 0 15px;
    padding: 15px 0;
}

div.fixed div.leftCol {
    float: left;
    display: inline;
    margin-right: -330px; /* -330px */
    width: 100%;
    overflow: hidden;
}

div.fixed div.leftColWrapper {
    margin-right: 330px; /* 330px */
    padding: 15px;
    padding-right: 0;
    overflow: hidden;
}

div.fixed.fiflufi div.leftColWrapper {
    padding-right: 15px;
}

div.fixed div.rightCol {
    float: right;
    display: inline;
    position: relative;
    padding: 15px;
    width: 300px; /* 300px */
}

/* ==========================================================================
   Legacy left navigation
   ========================================================================== */

.left-nav #content {
    margin-left: 110px;
}

.left-nav .rightCol {
    margin-top: 15px;
}

/* ==========================================================================
   Ads
   ========================================================================== */

#LastAd_leaderboard {
    margin: 0 auto 9px;
    position: relative;
    zoom: 1;
    z-index: 1;
    width: 970px;
}

.responsive #LastAd_leaderboard,
.responsive #LastAd_lowerleaderboard.active {
    left: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Commented out: Causes normal widthed ads to be misaligned (WEB-16450)
div.fixed #LastAd_leaderboard {
    left:-35px;
}
*/

/* Ads should be able to appear over page content, but not active UI popups */
.LastAd {
    z-index: 40;
    position: relative;
    text-align: center;
}

.LastAd > span,
.LastAd .centerShim {
    display: inline-block;

    /* Stop absolutely positioned elements within the ad causing 
       horizontal scrolling in combination with the overflow rules 
       on #LastAd_leaderboard (WEB-18919) */
    position: relative;    
}

/* Hack: for ads that use a span to set height and width.
   They should override this with their own inline style, but if they forget… */
.LastAd > span > span[style] {
    display: inline-block;
}

.LastAd,
.LastAd * {
    line-height: 0px;
    font-size: 1px;
    vertical-align: baseline;
}

#LastAd_lowerleaderboard.active {
    padding: 15px;
    border-top: 1px solid #ebebeb;
    background: #fff;
}

/* Ad is separated from content differently */
.responsive #LastAd_lowerleaderboard.active {
    background: none;
    padding: 0;
    border: 0;
    margin-bottom: 12px;
    margin-top: -12px;
}

#LastAd_lowerleaderboard {
    clear: both;
    zoom: 1;
}

#LastAd_leaderboard .wrapper,
#LastAd_lowerleaderboard .wrapper {
    width: 900px;
    margin: 0 auto;
    text-align: center;
}

#LastAd_skin a,
#LastAd_skin img {
    position: absolute;
}

#LastAd_lowermpu.active {
    clear: both;
    margin: 24px 0 0 0;
}

div.sic div#LastAd_sky.active {
    float: right;
    display: inline;
    width: 160px;
    height: 600px;
}

#LastAd_sky.active .wrapper {
    width: 160px;
    height: 600px;
    overflow: hidden;
}

div.skylineRight {
    margin-left: -15px;
    padding-right: 160px;
    overflow: hidden;
}
div.skylineRight div.skyWrap {
    overflow: hidden;
    padding: 0 15px;
    zoom: 1;
}

#page div.skylineRight div#LastAd_sky {
    float: right;
    display: inline;
    margin: 15px -160px 0 0;
}

/* Only .fixed layouts have margin on fullWidth */
#page.fixed .fullWidth div.skylineRight div#LastAd_sky {
    margin-top: 0;
}

div.mpu {
    margin: 15px 0;
}

div.mpu .wrapper {
    width: 300px;
    height: 250px;
    overflow: hidden;
}

/* Subtle drop shadows on content when pages have skins
   ========================================================================== */

body[style*="background-image"] #content,
.skin-active #content {
    box-shadow: 0 2px 20px -5px rgba(0,0,0,0.4);
}

/* …but no box-shadow on Radio skins, ADS-20 */
#radio #content {
    box-shadow: none;
}

/* ==========================================================================
   Classic full width
   ========================================================================== */

div.sic #content .fullWidth {
    margin: 0 0 15px;
    clear: both;
}

/* ==========================================================================
   Two columns and classic columns
   ========================================================================== */

#page .twoCols h2 {
    margin-left: 0;
}

.twoCols {
    overflow: hidden;
}

div.sic #content .leftColumn,
.twoCols .leftColumn {
    float: left;
    display: inline;
    overflow: hidden;
    width: 50%;
}

div.sic #content .leftColumn .wrapper,
.twoCols .leftColumn .wrapper {
    margin: 0 7px 15px 0;
    zoom: 1;
}

div.sic #content .rightColumn,
.twoCols .rightColumn {
    float: right;
    display: inline;
    overflow: hidden;
    width: 49%;
}

div.sic #content .rightColumn .wrapper,
.twoCols .rightColumn .wrapper {
    margin: 0 0 15px 7px;
    zoom: 1;
}

/* ==========================================================================
   Fiflufi – Fixed-Fluid-Fixed
   As of WEB-16450 this is all fixed.
   ========================================================================== */

.fiflufi #content {
    background: url(http://cdn.lst.fm/flatness/grids/fiflufi_right.5.png) right top repeat-y #fff;
}

.fiflufi-clean #content {
    background: #fff;
}

.fiflufi #content .fullWidth {
    margin: 0;
    padding: 0 15px 15px;
    background: #fff;
    clear: both;
}

.fiflufi #LastAd_sky {
    float: right;
    display: inline;
    width: 160px;
    height: 600px;
}

.fiflufi .leftCol {
    float: left;
    display: inline;
    margin-right: -330px;
    width: 100%;
    overflow: hidden;
}

.fiflufi .leftColWrapper {
    margin-right: 330px;
    padding: 0 15px 15px;
    overflow: hidden;
}

.fiflufi .rightCol {
    float: right;
    display: inline;
    position: relative;
    padding: 0 15px 15px;
    width: 300px;
    font-size: 11px;
    line-height: 1.181818em;
}

.fiflufiSmall .leftCol {
    margin-right: -190px;
    background: none;
}

.fiflufiSmall .leftColWrapper {
    margin-right: 190px;
    background: none;
}

.fiflufiSmall .rightCol {
    width: 160px;
    background: none;
}

.fiflufiSmall #content {
    background: #fff;
}

/* ==========================================================================
   Grid overlay helpers
   ========================================================================== */

div.showgrid div.leftColumn {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

div.showgrid div.rightColumn {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: 7px top;
}

.showgrid #secondaryNavigation {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

.showgrid #content .fullWidth {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: left top;
}

.showgrid #content .leftColWrapper {
    padding-right: 0;
    border-right: solid 15px #fff386;
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

.showgrid .rightCol {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

.showgrid .sic #content {
    background-image: url(http://cdn.lst.fm/flatness/grids/grid_48.15.png);
    background-position: 15px top;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#LastFooter {
    clear: both;
}

.ie6 #LastFooter {
    height: 1%;
}

/* ==========================================================================
   Default styles, with many convoluted page type dependent selectors. Eww.
   ========================================================================== */

#page h2.heading {
    clear: both;
    margin: 10px -15px 2px;
    padding: 0;
    color: #D51007;
    font-size: 18px;
    line-height: 13px;
    border-top: 1px dotted #ccc;
}

.lfmBlack #page h2.heading {
    color: #1b1b1b;
}

.h2Wrapper {
    display: block;
    padding: 15px;
}

.h2Wrapper a {
    text-decoration: none;
    color: #D51007;
}

.lfmBlack #page .h2Wrapper a {
    color: #1b1b1b;
}

#page .h2Wrapper a:hover {
    text-decoration: underline;
}

.lfmBlack #page h3,
.lfmBlack #page h3 a {
    color: black !important;
}
.lfmBlack #page #radio h3,
.lfmBlack #page #radio h3 a {
    color: white !important;
}

#page .fiflufi .leftCol h2 small a,
#page .fixed .leftCol h2 small a {
    color: #0187c5;
}

.fiflufi .leftCol hr {
    clear: both;
    height: 2px;
    margin: 15px -15px 10px -15px;
    border: 0;
    border-top: 1px solid #ccc;
    background: #efefef;
    display: none;
}

#page .rightCol h2.heading {
    margin: 24px 0 12px;
    padding: 0;
    font-size: 14px;
    line-height: 18px;
    border-top: none;
}

#page .rightCol > h2.first,
#page .rightCol > h2.heading:first-child,
.mpuTop #LastAd_mpu.inactive + h2.heading {
    margin-top: 0;
}

.rightCol .h2Wrapper {
    padding: 0;
}

.fiflufi .leftCol a.seemore {
    margin: 5px 0 0 0;
    padding: 2px 0 2px 10px;
    background: url(http://cdn.lst.fm/flatness/grey-more-btn.gif) no-repeat left top;
    float: right;
    text-decoration: none;
}

.fiflufi .leftCol a.seemore span {
    padding: 2px 30px 2px 0;
    background: url(http://cdn.lst.fm/flatness/grey-more-btn.gif) no-repeat right top;
    font-size: 10px;
    color: #000;
}

.fiflufi .leftCol a.seemore:hover span {
    color: #666;
}

.fiflufi .rightCol a.seemore {
    float: right;
    margin: 5px 0 0 0;
    color: #0187c5;
    text-decoration: none;
}

.moduleOptions {
    clear: both;
    display: block;
    text-align: right;
    color: #0187c5;
}

.moduleOptionsLeft {
    text-align: left;
}

#page .moduleOptions {
    display: block;
    height: 15px;
    font-weight: bold;
    font-size: 11px;
    line-height: 14px;
}
#page .moduleOptions a,
#page a .moduleOptions {
    float: right;
    display: block;
    font-size: 11px;
    line-height: 14px;
    padding-right: 18px;
    margin-left: 9px;
    background-image: url('http://cdn.lst.fm/flatness/icons/see_more_arrow_blue_13x13_2.png');
    background-repeat: no-repeat;
    background-position: right top;
}

.right {
    float: right;
}

.seemore {
    display: block;
    padding-right: 18px;
    background: url('http://cdn.lst.fm/flatness/icons/see_more_arrow_blue_13x13_2.png') 100% 2px no-repeat;
}

/* ==========================================================================
   Recommended items
   ========================================================================== */

a.recommendedLink {
    color: #d51007;
    font-weight: bold;
    font-size: 12px;
}

a.recommendedLink .recommended_icon {
    margin: 0 4px -2px 0;
}

div.rightCol div.recommendedContent {
    margin: 0 0 15px 0;
}

#page div.rightCol div.recommendedContent h2.heading {
    border-top: 1px solid #f46862;
    margin: 0 0 12px 0;
    background: #ffefe7;
    color: #d51007;
}

#page div.rightCol div.recommendedContent h2.heading span.h2Wrapper {
    padding: 5px 10px;
}

/* Override */

.fiflufiSmall .rightCol h2 {
    background: none;
    font-size: 12px;
    font-weight: bold;
}

.fiflufiSmall .rightCol h2 a {
    color: #D51007;
}

/* ==========================================================================
   Narrow page layouts
   ========================================================================== */

.narrow {
    position: relative;
    left: 225px;
    margin: 20px 15px 0;
    width: 420px;
    font-size: 15px;
    line-height: 20px;
    padding: 15px 0;
}

.narrow h1 {
    font-size: 22px;
    line-height: 30px;
    color: #D51007;
    margin-bottom: 0.75em;
}

.narrow p {
    margin-bottom: 1em;
}

/* Narrow page forms
   ========================================================================== */

.narrow-form {
    max-width: 540px;
    margin: 48px auto;
    position: relative;
}

.narrow-form h1 {
    margin: 0 0 24px;
}

.narrow-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.narrow-form .memo {
    margin-bottom: 24px;
    padding: 18px 20px;
}

.narrow-form fieldset.submit {
    text-align: right;
}

.narrow-form .action-button {
   float: right;
   margin: 0 0 0 1em;
}

.narrow-form .cancel {
   line-height: 27px;
}

.narrow-form .summary dd {
    margin-bottom: 18px;
}

.narrow-form .summary dt {
    font-weight: bold;
}

/* ==========================================================================
   970 grid layout. Used only on charts and now deprecated.
   ========================================================================== */

.l-970 #content {
    margin: -1px 0 0 0;
    padding: 18px 18px 0;
}

.l-970 #LastFooter {
    margin-left: 0;
}

.l-row {
    overflow: hidden;
    margin-left: -8px;
    margin-right: -8px;
}

.ie6 .l-row {
    zoom: 1;
}

.l-g1,
.l-g2,
.l-g3,
.l-g4,
.l-g5,
.l-g6 {
    float: left;
    padding-left: 8px;
    padding-right: 8px;
}

.l-g1 {
    width: 142px;
}
.l-g2 {
    width: 300px;
}
.l-g3 {
    width: 458px;
}
.l-g4 {
    width: 616px;
}
.l-g5 {
    width: 774px;
}
.l-g6 {
    width: 932px;
}

#header {
    position: relative;
    display: block;
    height: 70px;
    margin: 0 0 8px;
}

.responsive #header {
/*    max-width: 940px;*/
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

#headerWrapper {
    position: relative;
    height: 68px;
    margin: 0 -15px;
}

#fauxHeaderContainer {
    position: relative;
    float: left;
    display: block;
    width: 100%;
    min-width: 930px;
}

#fauxHeader {
    position: absolute;
    display: block;
    width: 100%;
    height: 70px;
    top: 0;
    background-position: 0 0;
    background-repeat: repeat-x;
}

/** Logo */

#lastfmLogo {
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 2px;
    display: block;
    width: 110px;
    height: 44px;
    background-position: 0 -160px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

#lastfmLogo:hover {
    background-position: -110px -160px;
}

/** Navigation */

#primaryNav {
    position: absolute;
    top: 1px;
    left: 129px;
    z-index: 1;
    zoom: 1;
}

#primaryNav .navItem {
    float: left;
    display: block;
    margin-right: 2px;
}

#primaryNav .nav-link {
    display: block;
    float: left;
    padding: 15px 9px 7px 9px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-shadow: #870802 0 1px 0;
}

#primaryNav .nav-link:hover {
    background-position: 0 -260px;
    background-repeat: repeat-x;
}

/* Profile Links */

#profileLinks {
    position: absolute;
    right: 15px;
    top: 10px;
    color: #f77a74;
    z-index: 0;
}

#profileLinks ul {
    float: right;
    display: block;
    zoom: 1;
}

#profileLinks .profileItem {
    float: right;
    display: inline-block;
    overflow: hidden;
}

#profileLinks .profile-link {
    display: inline-block;
    height: 15px;
    line-height: 15px;
    padding: 3px 7px 5px 5px;
    font-size: 11px;
    color: #eee;
    text-decoration: none;
    font-weight: normal;
}

#profileLinks .profile-link:hover {
    color: #fff;
    text-decoration: none;
}

#profileLinks .divider a {
    background-position: right -510px;
    background-repeat: no-repeat;
}

#loginLink .profile-link {
    height: 23px;
    display: inline-block;
    padding: 0 3px 0 0;
    background-position: right -360px;
    background-repeat: no-repeat;
    color: #eee;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: #870802 0 1px 0;
    overflow: hidden;
}

#loginLink .profile-link strong {
    height: 19px;
    padding: 1px 5px 3px 8px;
    background-position: left -360px;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 19px;
    vertical-align: top;
}

/** ID Badger */

#idBadger {
    margin-left: 4px;
    position: relative;
}

#idBadgerUser {
    position: relative;
    display: inline-block;
    background-position: 0 -360px;
    background-repeat: no-repeat;
    font-size: 11px;
    height: 11px;
    line-height: 11px;
    padding: 5px 7px 7px 23px;
    color: #eee;
    font-weight: bold;
    text-decoration: none;
    text-shadow: #870802 0 1px 0;
}

#idBadger.secure #idBadgerUser {
    padding-left: 7px;
}

#idBadgerUser:hover {
    color: #fff;
}

#idBadgerUser img {
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    height: 16px;
    width: 16px;
    border-radius: 2px;
}


#idBadgerDropper {
    display: inline-block;
    width: 21px;
    background-position: 0 -420px;
    background-repeat: no-repeat;
    font-size: 11px;
    height: 11px;
    line-height: 11px;
    padding: 5px 0 7px 0;
    text-decoration: none;
    text-indent: -9999px;
}

#idBadgerDropper span {
    visibility: hidden;
}

#idBadgerDropper:hover {
    background-position: -21px -420px;
}

#idBadger ul {
    display: none;
}

#idBadgerDropDown {
    background: #a00100;
    display: block;
    border: 1px solid #750500;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px;
}

#idBadgerDropDown a {
    display: block;
    font-size: 11px;
    line-height: 22px;
    padding: 0 7px;
    color: #eee;
    text-decoration: none;
    cursor: pointer;
}

#idBadgerDropDown a:hover {
    background: #750500;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.ie6 #idBadgerDropDown a {
    display: inline-block;
}

/** Search */

#siteSearch {
    position: absolute;
    top: 46px;
    right: 15px;
}

#siteSearchProgress {
    display: block;
    position: absolute;
    top: 3px;
    right: 5px;
    background: url(http://cdn.lst.fm/flatness/spinners/spinner_ffffff_870802.gif) no-repeat;
}

#siteSearchBox {
    display: block;
    float: left;
    width: 180px;
    height: 15px;
    line-height: 15px;
    padding: 4px 5px 3px 5px;
    margin: 0;
    border: 0;
    font-size: 11px;
    background-position: 0 -450px;
    background-repeat: no-repeat;
    outline: none;
}

#siteSearchSubmit {
    display: block;
    float: left;
    width: 21px;
    height: 22px;
    padding: 0;
    margin :0;
    border: 0;
    background-position: -42px -420px;
    background-repeat: no-repeat;
    cursor: pointer;
}

#siteSearchSubmit:focus,
#siteSearchSubmit:hover {
    background-position: -63px -420px;
    background-repeat: no-repeat;
}

/** Header Promo */

#headerPromo {
    position: absolute;
    top: 45px;
    left: 15px;
    font-size: 11px;
    line-height: 23px;
    color: #ddd;
    font-weight: bold;
}

#headerPromo a {
    color: #ddd;
}

#headerPromo a:hover {
    color: #fff;
}

/** Header Links */

#headerLinks {
    position: absolute;
    top: 45px;
    right: 240px;
    height: 15px;
    line-height: 15px;
    padding: 4px 5px 4px 5px;
    color: #ddd;
    font-size: 11px;
}

#headerLinks a {
    color: #ddd;
}

#headerLinks a:hover {
    color: #fff;
    text-decoration: underline;
}

/** Language selector */

#headerLangToggle img {
    vertical-align: middle;
    margin: 0 2px 4px 0;
}

#headerLangToggle img.globe_icon {
    background-position: -84px -420px;
    background-repeat: no-repeat;
}

#headerLangToggle:hover img.globe_icon {
    background-position: -95px -420px;
}

#langSelector.js {
    display: inline-block;
    margin-top: 3px;
    background: #a00100;
    border: 1px solid #750500;
    border-top: 0;
    margin-left: -15px;
    border-radius: 0 0 3px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
}

#langSelector.js a {
    display: block;
    padding: 0 7px;
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    color: #ddd;
    text-decoration: none;
    cursor: pointer;
}

.ie6 #langSelector.js a {
    display: inline-block;
}

#langSelector.js a:hover {
    background: #750500;
    color: #fff;
}

#langSelector.js a.icon:hover span {
    text-decoration: none !important;
}

#langSelector.js img.icon {
    margin: 0 3px -1px 0;
    vertical-align: baseline;
}

#langSelector.nojs {
    display: block;
    margin: 10px 0;
    border: solid 1px #fff200;
    padding: 5px;
    background: #ffc;
    text-align: center;
    font-size: 11px;
    line-height: 1.181818em;
}

#langSelector.nojs li {
    display: inline;
    margin-right: 0.727273em;
}

/** Background sprite */

#fauxHeader,
#lastfmLogo,
#primaryNav .nav-link:hover, 
#profileLinks .divider a,
#loginLink .profile-link,
#loginLink .profile-link strong,
#idBadgerUser,
#idBadgerDropper,
#siteSearchBox,
#siteSearchSubmit,
#headerLangToggle img.globe_icon {
    background-image: url(http://cdn.lst.fm/flatness/header/headersprite.1.png);
}

/** Paint it black */

.lfmBlack #fauxHeader { background-position: 0 -80px; }
.lfmBlack #lastfmLogo { background-position: 0 -210px; }
.lfmBlack #lastfmLogo:hover { background-position: -110px -210px; }
.lfmBlack #primaryNav .nav-link { text-shadow: #000 0 1px 1px; }
.lfmBlack #primaryNav .nav-link:hover { background-position: 0 -310px; }
.lfmBlack #profileLinks .divider a { background-position: right -540px; }
.lfmBlack #loginLink .profile-link { background-position: right -390px; text-shadow: #000 0 1px 1px; }
.lfmBlack #loginLink .profile-link strong { background-position: left -390px; }
.lfmBlack #idBadgerUser { background-position: 0 -390px; text-shadow: #000 0 1px 1px; }
.lfmBlack #idBadgerDropper { background-position: -110px -420px; }
.lfmBlack #idBadgerDropper:hover { background-position: -131px -420px; }
.lfmBlack #idBadgerDropDown { background: #000; border-color: #000; }
.lfmBlack #idBadgerDropDown a:hover { background: #363636; }
.lfmBlack #siteSearchProgress { background: url(http://cdn.lst.fm/flatness/spinners/spinner_ffffff_666666.gif) no-repeat; }

.lfmBlack #siteSearchBox { background-position: 0 -480px; }
.lfmBlack #siteSearchSubmit { background-position: -152px -420px; }
.lfmBlack #siteSearchSubmit:hover { background-position: -173px -420px; }
.lfmBlack #headerLangToggle img.globe_icon { background-position: -194px -420px; }
.lfmBlack #headerLangToggle:hover img.globe_icon { background-position: -205px -420px; }
.lfmBlack #langSelector.js { background: #000; border-color: #000; }
.lfmBlack #langSelector.js a:hover { background: #363636; }


#staging-overlay-div {
    opacity: 0.5;
    filter:alpha(opacity=50);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    text-align: center;
    font-size: 10px;
    line-height: 13px;
}

#staging-overlay-div span {
    background: #fff;
    padding: 0 5px 2px 5px;
    color: #666;
    border-radius: 0 0 2px 2px;
}

.heightShim {
    height: 0;
    width: 0;
    float: left;
}

.adWrapper {
    line-height: 0.5 !important;
}

#LastAd_Top {
    margin-bottom: 0 !important;
	position:relative;
}

#radio .LastAd_Top {
    margin-left: -45px;
    margin-right: -45px;
}

.google-ad-skin {
    position: absolute;
}

#LastAd_TopRight {
    float: right;
}


/* ==========================================================================
   Top albums
   ========================================================================== */

/* Use nth-child helper classes for legacy browser support */
.album-list--expanded .item-2n-plus-1,
.album-list--compact  .item-4n-plus-1 {
    clear: left;
}

.album-item h3 {
    margin-bottom: 0;
}

.album-item-detail-wrapper {
    margin-bottom: 18px;
}

.album-item-details {
    position: relative;
    font-size: 12px;
}

.album-item-cover {
    margin-bottom: 18px;
    height: 220px;

    /* Don't look like empty space when userserve is acting up */
    background-color: #eee;
}

/* We know these albums are square, so optimise for that scenario to
   make resized images look as best as possible. (Without this the
   images are cropped on IE8) */
.ie8 .album-item .text-over-image-image {
    max-width: 100%;
    max-height: 100%;
}

/* Expanded album list
   ========================================================================== */

/* Remove margin from cover, as it's now floated left */
.album-list--expanded .album-item-cover {
    margin-bottom: 0;
}


/* Compact album list
   ========================================================================== */

/* Position buy button directly below cover */
.album-list--compact .ecommerce-dropdown,
.album-list--compact .ecommerce-single-button {
    position: absolute;
    top: -8px;
    width: 100%;
}

/* Push details down to make space for buy button */
.album-list--compact .album-item-detail-wrapper {
    padding-top: 40px;
}

/* …but don't if there isn't a buy button! */
.album-list--compact .album-item-detail-wrapper:only-child {
    padding-top: 10px;
}

/* putting this here for now should move elsewhere */
.textareaActions {
    margin: 5px;
    padding: 4px;
    padding-left:0;
    margin-left:-6px;
}

.textareaActions .action, .textareaActions div {
    margin: 6px;
}

.attachbutton {
    padding: 6px 6px 6px 20px;
    border: 1px solid #C0C0C0;
    background: #fff url(http://cdn.lst.fm/paperclip.png) 3px center no-repeat;
}


/* ==========================================================================
   Search autocomplete
   ========================================================================== */

.autocomplete-results {
    display: none;
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 50000;
    margin-top: 12px;
    font-size: 12px;
    min-width: 279px;
}

.autocomplete-results-container--open .autocomplete-results {
    display: block;
}

.dark-box {
    border-radius: 2px;
    background: #333;
    color: #fff;
    border: 1px solid #111;
    text-shadow: rgba(0,0,0,0.5) 0 -1px 0;
    box-shadow: rgba(0,0,0,0.75) 0 3px 10px;
}

.dark-box--columns {
    background: #333 url('http://cdn.lst.fm/flatness/search/search_bg.png') repeat-y -80px;
}

.autocomplete-results .media {
    margin-bottom: 0;
}

.autocomplete-results .media-pull-left {
    margin-right: 10px;
}

.autocomplete-results a {
    color: #fff;
}

.autocomplete-results .lite {
    color: #999;
}

.autocomplete-results a:hover,
.autocomplete-results a:focus {
    text-decoration: none;
}

/* Groups and headers
   ========================================================================== */

.autocomplete-group-heading {
    width: 60px;
    text-align: right;
    margin-top: 12px;
}

.autocomplete-group-heading h3 {
    font-weight: normal;
    margin-bottom: 0;
}

.lfmBlack #page .autocomplete-group-heading h3 {
    color: #fff !important;
}

.autocomplete-group {
    border-bottom: 1px solid #292929;
    border-top: 1px solid #3d3d3d;
    padding: 6px 0;
    margin-bottom: 0;
    width: 209px;
}

.autocomplete-group--more {
    border-bottom: 0;
    margin-left: 70px;
}

/* Results
   ========================================================================== */

.autocomplete-results .media:first-child .autocomplete-group {
    border-top: 0;
}

.autocomplete-results .media:last-child .autocomplete-group {
    border-bottom: 0;
    margin-bottom: -6px;
}

.autocomplete-result--tag {
    text-transform: lowercase;
}

.autocomplete-result a {
    display: block;
    padding: 6px 10px 6px;
}

.autocomplete-result a:focus {
    outline: 0;
}

.autocomplete-result--selected a {
    background-color: #2e4f9c;
}

.autocomplete-result img {
    border-radius: 2px;
    display: block;
    margin-top: 3px;
    width: 30px;
    height: 30px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px, rgba(255, 255, 255, 0.1) 0 -1px 1px;
}

.autocomplete-result .calSheet {
    margin-top: 3px;
}

/* Icon tweaks
   ========================================================================== */

.autocomplete-result .iconleft {
    padding-left: 33px;
}

.autocomplete-result .iconleft:before {
    left: 10px;
}


/* ==========================================================================
   Old autocomplete
   ========================================================================== */

.autoCompleteResults  {
    background: #fff;
    border: 2px solid #C0C0C0;
    z-index: 1000;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 350px !important;
}
.autoCompleteResults li {
    padding: 3px;
}
.autoCompleteResults li.selected {
    background: #C0C0C0;
    color: #fff;
}

.staff span.name {
    background: #D51007 !important;
}

.alumni span.name {
    background: #5336bd !important;
}

.subscriber span.name {
    background: #000 !important;
}

.moderator span.name {
    background: orange !important;
}

.userType {
    font-size: 9px;
    vertical-align: super;
    line-height: 0px;
    font-weight: normal;
}

.alumni .userType {
    color: #5336bd !important;
}

.staff .userType {
    color: #D51007 !important;
}

.moderator .userType {
    color: orange !important;
}

.subscriber .userType {
    color: #000 !important;
}

span.userImage {
    position: relative;
}

/* See CATA-486. Should have been part of base style 
   as a necessary requirement to position user badge. */
.responsive .userImage {
    display: block;
}

img.groupImage,
span.groupImage img,
span.userImage img {
    padding: 1px;
    border: 1px solid #ccc;
}

a:hover img.groupImage,
a:hover span.userImage img {
    padding: 1px;
    border-color: #0187c5;
}

span.userImage img.staff_icon,
span.userImage img.subscriber_icon,
span.userImage img.moderator_icon,
span.userImage img.alumni_icon,
a:hover span.userImage img.staff_icon,
a:hover span.userImage img.subscriber_icon,
a:hover span.userImage img.moderator_icon,
a:hover span.userImage img.alumni_icon {
    position: absolute;
    top: -3px;
    left: -3px;
    margin: 0 0 6px 0;
    padding: 0;
    border: 1px solid #ccc;
}

span.staffWithIcon {
    padding-right: 7px;
    background: url(http://cdn.lst.fm/flatness/global/user/icon_staff_m.png) no-repeat top right;
}

/* for 1-button forms inline with bigButton */
form.inline.lfmBigButton {
    position: relative;
}

form.inline.lfmBigButton input.button {
    position: relative;
    top: 2px;
    height: 18px;
}


/* margin to separate preview button from track name in bbcode blocks */
.bbcode .previewbutton,
.wiki .previewbutton,
blockquote .previewbutton {
    margin-right: 3px;
}

.bestofbadge {
    position: relative;
    min-height: 49px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-style: dotted;
    border-width: 0 0 1px 0;
}

.bestofbadge img {
    position: absolute;
    top: 0;
    left: 0; 
}

.bestofbadge-position {
    font-size: 30px;
    letter-spacing: -3px; 

    position: absolute;
    top: 0;
    left: 90px; 
}

.bestofbadge-description {
    padding-left: 9.5em;
    margin-left: 90px;
    padding-top: 5px;
}

.bestofbadge-strlen-1 .bestofbadge-description {
    padding-left: 4em;
}
.bestofbadge-strlen-2 .bestofbadge-description {
    padding-left: 5.25em;
}
.bestofbadge-strlen-3 .bestofbadge-description {
    padding-left: 6.5em;
}


#content .bestofbadge-description .seemore {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: url('http://cdn.lst.fm/flatness/icons/see_more_arrow_blue_13x13_2.png') 100% 2px no-repeat;
    padding-right: 18px;
    white-space: nowrap;
}

#content .bestofbadge-description .seemore:hover {
    text-decoration: underline;
}

.ie7 #content .bestofbadge-description .seemore {
    zoom: 1;
}


.breadcrumb {
    color: #0187c5;
    margin: 1em 0 1em 15px;
    zoom: 1;
}

.fullWidth .breadcrumb  {
    margin-top: 0;
}

.leftCol .breadcrumb  {
    margin: 0;
}

.leftCol .album-breadcrumb,
.leftCol .track-breadcrumb {
    margin-bottom: 12px;
}

.breadcrumb span {
    color: #000;
}


div#browsablechart {
  margin-top: 7px;
}

div#browsablechart fieldset#typeSelector {
  margin-bottom: 1em;
}

div#browsablechart fieldset#typeSelector.withDateSelector {
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 13px;
  float: left;
  clear: both;
}

div#browsablechart div#dateSelector {
  padding-left: 190px;
  position: relative;
  margin-bottom: 1em;
  clear: both;
}

div#browsablechart div#calendar {
  width: 175px;
  float: left;
  display: inline;
  margin-left: -190px;
}

#LastWebsite div#browsablechart table.calendar {
  width: 100%;
}

#LastWebsite div#browsablechart table.calendar td {
  width: 14%;
}

div#browsablechart table#selectedWeekStats {
  margin-top: 0.7em;
  font-size: 11px;
}

div#browsablechart table#selectedWeekStats strong {
  margin-left: 0.5em;
}

#browsablechart #moreInfo {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 190px;
}

#browsablechart #moreInfo ul.calendarLegend {
  margin: 0;
  white-space: nowrap;
}

div#browsablechart div#dateSelector p.chartmore {
  margin: 0;
  font-size: 11px;
}

/* Buttons */
a.button,
input.button,
button.button,
a.confirmButton,
input.confirmButton,
button.confirmButton {
    padding: 0 4px;
    border: 1px solid #ccc;
    border-color: #999 #858585 #666 #858585;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;
    vertical-align: baseline;
    text-decoration: none;
    border-radius: 2px;
    background: #9b9b9b url(http://cdn.lst.fm/flatness/buttons/5/button.png) 0 0 repeat-x;
    font-weight: bold;
    line-height: 16px;
    text-shadow: #9b9b9b 0 -1px 1px;
}

a.confirmButton,
input.confirmButton,
button.confirmButton {
    border-color: #505050 #404040 #2d2d2d #404040;
    font-weight: bold;
    background: #515151 url(http://cdn.lst.fm/flatness/buttons/5/confirm_button.png) 0 0 repeat-x;
    text-shadow: #515151 0 -1px 1px;
}

a.confirmButtonBlue,
input.confirmButtonBlue,
button.confirmButtonBlue {
    border-color: #00a4c3 #0094b6 #007599 #0094b6;
    font-weight: bold;
    background: #00b6d8 url(http://cdn.lst.fm/flatness/buttons/5/confirm_button_blue.png) 0 0 repeat-x;
    text-shadow: #007599 0 -1px 1px;
}

a.button:hover,
input.button:hover,
button.button:hover,
a.confirmButton:hover,
input.confirmButton:hover,
button.confirmButton:hover {
    color: #fff;
    text-decoration: none;
}

input.confirmButton[disabled],
input.disabledConfirmButton {
    color: #bbb;
}

a.lfmBigButton,
a.lfmSmallButton,
.indicator,
.dismissbutton,
.mockAddButton {
    height: 18px;
    display: inline-block;
    padding: 0 3px 0 0;
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: #163551 0 -1px 1px;
    overflow: hidden;
}

/* Force colour and font size in certain cases, needs higher specificity */
#venue a.lfmSmallBuyMoreButton,
.resContainer .affiliates .lfmSmallButton,
.resContainer .affiliates .lfmSmallButton:hover {
    color: #fff;
    font-size: 9px;
}

a.lfmBigButton strong,
a.lfmBigButton span,
a.lfmSmallButton strong,
a.lfmSmallButton span,
.indicator span,
.indicator strong,
.dismissbutton span,
.dismissbutton strong,
.mockAddButton span,
.mockAddButton strong {
    height: 14px;
    padding: 2px 5px 2px 25px;
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/add_left.png) no-repeat left top;
    display: inline-block;
    line-height: 14px;
    vertical-align: top;
}

a.lfmTagButton strong {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/tag_left.png) no-repeat left top;
}

/* A button without all the backgroundyness */

a.lfmSimpleButton {
    height: auto;
    display: inline;
    padding: 0;
    background: none !important;
    color: #0187c5;
    text-align: left;
    vertical-align: baseline;
    text-shadow: none;
    overflow: visible;
}

a.lfmSimpleButton strong {
    height: auto;
    padding: 0;
    background: none !important;
    display: inline;
    line-height: auto;
    vertical-align: baseline;
}

.mockAddButton {
    cursor: auto;
}

a.lfmBigButton:hover,
a.lfmSmallButton:hover {
    background-position: right bottom;
    color: #fff;
}

a.lfmBigButton:hover span,
a.lfmBigButton:hover strong,
a.lfmSmallButton:hover span,
a.lfmSmallButton:hover strong {
    background-position: left bottom;
}

a.lfmSimpleButton:hover,
a.lfmSimpleButton:hover {
    background-position: 0;
    color: #0187c5;
    text-decoration: underline;
}

a.lfmSimpleButton:hover strong {
    background-position: 0;
}


a.lfmSmallButton {
    height: 15px;
    font-size: 9px;
}
a.lfmSmallButton strong,
a.lfmSmallButton span {
    height: 13px;
    padding: 2px 5px 0 20px;
    line-height: 11px;
}

/* Share */
a.lfmSendButton {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    text-shadow: #2a2a2a 0 -1px 1px
}
a.lfmSendButton strong {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/share_left.png) no-repeat left top;
}
/* Join */
a.lfmJoinButton {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/grey_right.png) no-repeat right top;
    text-shadow: #2a2a2a 0 -1px 1px
}
a.lfmJoinButton strong {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/join_left.png) no-repeat left top;
}
/* Befriend */
a.lfmBefriendButton {
    background: #163551 url(http://cdn.lst.fm/flatness/buttons/6/add_right.png) no-repeat right top;
    text-shadow: #163551 0 -1px 1px
}
a.lfmBefriendButton strong {
    background: #163551 url(http://cdn.lst.fm/flatness/buttons/6/add_left.png) no-repeat left top;
}

a.lfmBigMultiButton {
    padding-right: 19px;
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/lightgrey_dropdown_right.png) no-repeat right top;
    text-shadow: #7f7f7f 0 -1px 1px
}

a.lfmBigMultiButton span {
    background: transparent url(http://cdn.lst.fm/flatness/buttons/8/more_left.png) no-repeat left top;
}

a.lfmSmallMultiButton {
    width: 26px;
    padding: 0;
    background: transparent url(http://cdn.lst.fm/flatness/buttons/6/small_multi.png) no-repeat right top;
}

a.lfmSmallMultiButton span {
    width: 26px;
    padding: 0;
    background: transparent;
}

a.lfmSmallModuleButton {
    width: 31px;
    padding: 0;
    background: transparent url(http://cdn.lst.fm/flatness/buttons/4/small_multi_white.png) no-repeat right top;
}

a.lfmSmallActiveModuleButton {
    background-position: right -15px !important;
}

a.lfmSmallModuleButton span {
    width: 31px;
    padding: 0;
    background: transparent;
}

a.lfmBigActiveMultiButton {
    background-position: right -18px !important;
}

a.lfmBigActiveMultiButton span {
    background-position: left -18px !important;
}

a.lfmSmallActiveMultiButton {
    background-position: left bottom !important;
}

.indicator {
    background: #b7b7b7 url(http://cdn.lst.fm/flatness/buttons/3/is_right.png) no-repeat right top;
    text-shadow: #999 0 -1px 1px
}
.indicator span,
.indicator strong {
    background: #b7b7b7 url(http://cdn.lst.fm/flatness/buttons/4/is_left.png) no-repeat left top;
}
.lovedindicator span,
.lovedindicator strong {
    background: #b7b7b7 url(http://cdn.lst.fm/flatness/buttons/4/is_left_loved.png) no-repeat left top;
}

/* Free Download and Full Track */
a.lfmFullTrackButton {
    text-decoration: none;
}

a.lfmFullTrackButton span {
    padding: 1px 2px;
    border: 1px solid #888;
    border-radius: 2px;
    color: #888;
    vertical-align: middle;
    letter-spacing: 0;
    line-height: normal;
    font-size: 8px
}

a.lfmFreeDownloadButton {
    height: 15px;
    padding-right: 2px;
    background: url(http://cdn.lst.fm/flatness/buttons/7/freedownload_right.png) no-repeat right top;
    overflow: visible;
    text-shadow: none;
    font-size: 9px;
}

a.lfmFreeDownloadButton span,
a.lfmFreeDownloadButton strong {
    height: 11px;
    line-height: 11px;
    padding: 2px 3px 2px 17px;
    background: url(http://cdn.lst.fm/flatness/buttons/7/freedownload_left.png) no-repeat left top;
    color: #fff;
    white-space: nowrap;
    font-weight: normal;
}

a.lfmFreeDownloadButtonLarge {
    width: 300px;
    height: auto;
    margin: 0 0 9px 0;
    padding: 0 0 3px 0;
    overflow: visible;
    text-shadow: #1586bb 0 -1px 1px;
    font-size: 11px;
    background: url(http://cdn.lst.fm/flatness/buttons/7/freedownload_large_bottom.png) no-repeat left bottom;
}
a.lfmFreeDownloadButtonLarge:hover {
    background-position: right bottom;
}

a.lfmFreeDownloadButtonLarge span,
a.lfmFreeDownloadButtonLarge strong {
    width: 269px;
    height: auto;
    margin-top: 0;
    padding: 2px 5px 0 26px;
    color: #fff;
    white-space: nowrap;
    text-align: left;
    line-height: 18px;
    background: url(http://cdn.lst.fm/flatness/buttons/7/freedownload_large_top.png) no-repeat left top;
}
a.lfmFreeDownloadButtonLarge:hover span,
a.lfmFreeDownloadButtonLarge:hover strong {
    background-position: right top;
}

/* Add */
a.lfmAddButtonLarge {
    height: 23px;
    padding-right: 2px;
    background: url(http://cdn.lst.fm/flatness/buttons/8/add.png) no-repeat right top;
    overflow: visible;
    color: #333;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;
}

a.lfmAddButtonLarge span,
a.lfmAddButtonLarge strong {
    height: 19px;
    line-height: 19px;
    padding: 2px 6px 2px 22px;
    background: url(http://cdn.lst.fm/flatness/buttons/8/add.png) no-repeat left top;
    color: #333;
    white-space: nowrap;
}

/* Big grey CSS buttons */

.lfmFlexButton,
.customSelect-dummy {
    display: inline-block;

    border: 1px solid;
    border-color: #d2d1d1 #b4b3b3 #959595 #b4b3b3;
    border-radius: 3px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

    background-color: #dbdbdb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#c3c3c3)); 
    background-image: -webkit-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:    -moz-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:     -ms-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:      -o-linear-gradient(top, #f2f2f2, #c3c3c3); 
    background-image:         linear-gradient(top, #f2f2f2, #c3c3c3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#c3c3c3');

    color: #101010;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;    
}

.lfmFlexButton:hover,
.lfmFlexButton:focus,
.customSelect-dummy.s-active {
    text-decoration: none;
    border-color: #d0d0d0 #a5a5a5 #797979 #a5a5a5;

    background: #d3d3d3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#b3b3b3)); 
    background-image: -webkit-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:    -moz-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:     -ms-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:      -o-linear-gradient(top, #f1f1f1, #b3b3b3); 
    background-image:         linear-gradient(top, #f1f1f1, #b3b3b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#b3b3b3');     

    color: #101010;
}

a.lfmFlexButton span,
a.lfmFlexButton strong,
input.lfmFlexButton,
.customSelect-text {
    display: block;
    padding: 2px 10px 1px 10px;
}

input.lfmFlexButton {
    padding-bottom: 2px;
    font-size: 12px;
    /* http://www.456bereastreet.com/archive/201108/line-height_in_input_fields/ */
    line-height: 1.45;
}

/* Custom select */

.customSelect-text {
    border-right: 1px solid #a5a5a5;
    background: #fff;
    border-radius: 2px 0 0 2px;
    color: #111;
}

.customSelect-dummy-wrap {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 100% -200px;
}

.customSelect-wrap select {
    font-size: 12px;
    height: 2em;
}

/* States */

.lfmFlexButton.s-secondary,
.customSelect-dummy.s-secondary {
    border-color: #404040;

    background-color: #6b6b6b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#545454)); 
    background-image: -webkit-linear-gradient(top, #828282, #545454); 
    background-image:    -moz-linear-gradient(top, #828282, #545454); 
    background-image:     -ms-linear-gradient(top, #828282, #545454); 
    background-image:      -o-linear-gradient(top, #828282, #545454); 
    background-image:         linear-gradient(top, #828282, #545454);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#828282', EndColorStr='#545454');

    color: #fff;
    text-shadow: rgba(0,0,0,0.5) 0 -1px 0;    
}

.lfmFlexButton.s-secondary:hover,
.lfmFlexButton.s-secondary:focus,
.customSelect-dummy.s-secondary.s-active {
    border-color: #242424;

    background: #474747;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6c6c6a), to(#323232)); 
    background-image: -webkit-linear-gradient(top, #6c6c6a, #323232); 
    background-image:    -moz-linear-gradient(top, #6c6c6a, #323232); 
    background-image:     -ms-linear-gradient(top, #6c6c6a, #323232); 
    background-image:      -o-linear-gradient(top, #6c6c6a, #323232); 
    background-image:         linear-gradient(top, #6c6c6a, #323232);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6c6c6a', EndColorStr='#323232');     
}

a.lfmFlexButton.s-hidden,
.customSelect-dummy.s-hidden {
    display: none;
}

a.lfmFlexButton.s-disabled,
.customSelect-dummy.s-disabled {
    color: #999999;
}

.customSelect-dummy.s-disabled .customSelect-dummy-wrap {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 100% -250px;
}

a.lfmFlexButton.s-previous span,
a.lfmFlexButton.s-previous strong {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 0 -300px;
    padding-left: 22px;
}
a.lfmFlexButton.s-previous.s-disabled span,
a.lfmFlexButton.s-previous.s-disabled strong {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 0 -350px;
    padding-left: 22px;
}

a.lfmFlexButton.s-next span,
a.lfmFlexButton.s-next strong {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 100% -100px;
    padding-right: 22px;
}
a.lfmFlexButton.s-next.s-disabled span,
a.lfmFlexButton.s-next.s-disabled strong {
    background: url(http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png) 100% -150px;
    padding-right: 22px;
}

/* Multibutton menu */

#multiButtonMenu {
    position: absolute;
    margin: 0 0 0 7px;
    z-index: 50;
}

#multiButtonMenu li.mAddToLibrary,
#multiButtonMenu li.mRemoveFromLibrary,
#multiButtonMenu li.mAddToFriends {
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}
#multiButtonMenu li.mSend {
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

#multiButtonMenu li {
    display: none;
}

#multiButtonMenu div.mAddToLibrary li.mAddToLibrary,
#multiButtonMenu div.mRemoveFromLibrary li.mRemoveFromLibrary,
#multiButtonMenu div.mAddToFriends li.mAddToFriends,
#multiButtonMenu div.mSend li.mSend,
#multiButtonMenu div.mObsess li.mObsess,
#multiButtonMenu div.mAddToPlaylist li.mAddToPlaylist,
#multiButtonMenu div.mAddTags li.mAddTags,
#multiButtonMenu div.mMessage li.mMessage,
#multiButtonMenu div.mLove li.mLove,
#multiButtonMenu div.mUnlove li.mUnlove,
#multiButtonMenu div.mBan li.mBan,
#multiButtonMenu div.mUnban li.mUnban,

#multiButtonMenu div.mMessageAll li.mMessageAll,
#multiButtonMenu div.mEditPermissions li.mEditPermissions,
#multiButtonMenu div.mAbdicate li.mAbdicate,
#multiButtonMenu div.mLeave li.mLeave,

#multiButtonMenu div.mEditDetails li.mEditDetails,

#multiButtonMenu div.mBuy li.mBuy, 

#multiButtonMenu div.mLoading li.mLoading {
    display: block;
}

/* Leave space for the price/loading spinner */
#multiButtonMenu div.mBuy li.mBuy a {
    padding-right: 45px;
}

#multiButtonMenu div.mBuy li.mBuy span.priceHint,
#multiButtonMenu div.mBuy li.mBuy img.loading {
    position: absolute;
    right: 5px;
}

#multiButtonMenu div.mBuy li.mBuy span.indicator_free,
#multiButtonMenu div.mBuy li.mBuy span.indicator_free {
    margin-top: 1px;
}

#multiButtonMenu div.mBuy li.mBuy img.loading {
    margin-top: 5px;
}

#multiButtonMenu div.mLoading li.mLoading a {
    height: 73px;
    width: 70px;
    background: url(http://cdn.lst.fm/flatness/spinner_big_f2f2f2.gif) center no-repeat #f2f2f2 !important;
}


/* Multi Button in a list format */

.multiButtonIcons li {
    float: left;
    width: 30px;
    height: 30px;    
    overflow: hidden;
    padding: 0;
}

.multiButtonIcons-hidden {
    display: none;
}

.multiButtonIcons a {
    background: url(http://cdn.lst.fm/flatness/buttons/9/multibuttonicons.png);
    display: block;
    padding-top: 10em;
}

.multiButtonIcons .multiButtonIcons-action-playlist { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-playlist a { background-position: -7px -5px; }
.multiButtonIcons .multiButtonIcons-action-playlist a:hover,
.multiButtonIcons .multiButtonIcons-action-playlist a:focus { background-position: -7px -45px; }
.multiButtonIcons .multiButtonIcons-action-playlist a:active { background-position: -7px -85px; }

.multiButtonIcons .multiButtonIcons-action-tag { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-tag a { background-position: -46px -5px; }
.multiButtonIcons .multiButtonIcons-action-tag a:hover,
.multiButtonIcons .multiButtonIcons-action-tag a:focus { background-position: -46px -45px; }
.multiButtonIcons .multiButtonIcons-action-tag a:active { background-position: -46px -85px; }

.multiButtonIcons .multiButtonIcons-action-share { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-share a { background-position: -84px -5px; }
.multiButtonIcons .multiButtonIcons-action-share a:hover,
.multiButtonIcons .multiButtonIcons-action-share a:focus { background-position: -84px -45px; }
.multiButtonIcons .multiButtonIcons-action-share a:active { background-position: -84px -85px; }

.multiButtonIcons .multiButtonIcons-action-buy { width: 30px; }
.multiButtonIcons .multiButtonIcons-action-buy a { background-position: -125px -5px; }
.multiButtonIcons .multiButtonIcons-action-buy a:hover,
.multiButtonIcons .multiButtonIcons-action-buy a:focus { background-position: -125px -45px; }
.multiButtonIcons .multiButtonIcons-action-buy a:active { background-position: -125px -85px; }

.multiButtonIcons .multiButtonIcons-action-addLibrary { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a { background-position: -165px -5px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a:hover,
.multiButtonIcons .multiButtonIcons-action-addLibrary a:focus { background-position: -165px -45px; }
.multiButtonIcons .multiButtonIcons-action-addLibrary a:active { background-position: -165px -85px; }

.multiButtonIcons .multiButtonIcons-action-removeLibrary { width: 29px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a { background-position: -165px -125px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:hover,
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:focus { background-position: -165px -165px; }
.multiButtonIcons .multiButtonIcons-action-removeLibrary a:active { background-position: -165px -205px; }

.multiButtonIcons .multiButtonIcons-action-love { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-love a { background-position: -204px -5px; }
.multiButtonIcons .multiButtonIcons-action-love a:hover,
.multiButtonIcons .multiButtonIcons-action-love a:focus { background-position: -204px -45px; }
.multiButtonIcons .multiButtonIcons-action-love a:active { background-position: -204px -85px; }

.multiButtonIcons .multiButtonIcons-action-unlove { width: 31px; }
.multiButtonIcons .multiButtonIcons-action-unlove a { background-position: -204px -125px; }
.multiButtonIcons .multiButtonIcons-action-unlove a:hover,
.multiButtonIcons .multiButtonIcons-action-unlove a:focus { background-position: -204px -165px; }
.multiButtonIcons .multiButtonIcons-action-unlove a:active { background-position: -204px -205px; }


.multiButtonIcons li {
    overflow: visible;
    position: relative;
}

.multiButtonIcons a {
    position: absolute;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.multiButtonIcons a:hover {
    overflow: visible;
    text-decoration: none;
}

.multiButtonIcons .tooltip-wrap {
    position: absolute;
    width: 40em;
    margin-left: -20em;
    left: 50%;
    bottom: 90em;
}

.multiButtonIcons a:hover .tooltip-wrap {
    bottom: 100%;
}

.multiButtonIcons .tooltip-wrap2 {
    position: absolute;
    left: 50%;
    bottom: 0;
}

.multiButtonIcons .tooltip {
    position: relative;
    left: -50%;
    bottom: 4px;
}

.tooltip {
    display: block;
    border: 1px solid #aaa;
    background: #fff;
    color: #1b1b1b;
    border-radius: 5px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;      
}

.tooltip-text {
    display: block;
    padding: 7px 10px;    
    background: url(http://cdn.lst.fm/flatness/tooltip/tooltip-arrow.png) 50% 100% no-repeat;
    margin-bottom: -13px;
    padding-bottom: 20px;
}


/* Buy / Download */

div.lfmDownloadButton,
div.buyButton {
    display: inline;
    margin-right: 4px;
}

div.lfmBuyButtonContainRight,
div.lfmBuyButtonContainRight div.lfmDropDown {
    float: right;
    text-align: right;
}
div.lfmBuyButtonContainRightDownloadsRingtones div.lfmDownloadButton {
    clear: right;
}
a.lfmBuyButton,
a.lfmDownloadButton {
    white-space: nowrap;
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/buy_dl_right.png) no-repeat right top;
    text-shadow: #777 0 -1px 1px;
    white-space: nowrap;
}
a.lfmRingtoneButton {
    font-size: 11px;
}
a.lfmRingtoneButton .mobile_icon {
    vertical-align: middle;
}
a.lfmBuyButton span,
a.lfmBuyButton strong {
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/buy_left.png) no-repeat left top;
}
a.lfmDownloadButton span,
a.lfmDownloadButton strong {
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/dl_left.png) no-repeat left top;
}

a.lfmRingtoneButtonDropDown,
a.lfmBuyButtonDropDown,
a.lfmDownloadButtonDropDown {
    padding: 0 14px 0 0;
    white-space: nowrap;
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/buy_dl_drp_right.png) no-repeat right top;
    text-shadow: #777 0 -1px 1px;
    white-space: nowrap;
}
a.lfmRingtoneButtonDropDown span,
a.lfmRingtoneButtonDropDown strong {
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/rt_drp_left.png) no-repeat left top;
}
a.lfmBuyButtonDropDown span,
a.lfmBuyButtonDropDown strong {
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/buy_drp_left.png) no-repeat left top;
}
a.lfmDownloadButtonDropDown span,
a.lfmDownloadButtonDropDown strong {
    background: #979797 url(http://cdn.lst.fm/flatness/buttons/6/dl_drp_left.png) no-repeat left top;
}

a.lfmBigBuyMoreButton,
a.lfmMultiBuyDialogButton {
    padding: 0 3px 0 0;
    white-space: nowrap;
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_right_nodropdown.png);
    text-shadow: #333 0 1px 1px;
}

.lfmDropDown a.lfmBigBuyMoreButton {
    padding: 0 19px 0 0;
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_right.png);
}

a.lfmBigBuyMoreButton span,
a.lfmBigBuyMoreButton strong,
a.lfmMultiBuyDialogButton span,
a.lfmMultiBuyDialogButton strong {
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_left.png);
}

a.lfmSmallBuyMoreButton {
    padding: 0 3px 0 0;
    white-space: nowrap;
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_right_small_nodropdown.png);
    text-shadow: #333 0 1px 1px;
}

.lfmDropDown a.lfmSmallBuyMoreButton {
    padding: 0 17px 0 0;
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_right_small.png);
}

a.lfmSmallBuyMoreButton span,
a.lfmSmallBuyMoreButton strong {
    background-image: url(http://cdn.lst.fm/flatness/buttons/8/buy_left_small.png);
}

.expanded a.lfmRingtoneButtonDropDown,
.expanded a.lfmBuyButtonDropDown,
.expanded a.lfmDownloadButtonDropDown {
    background-position: right center;
}

.expanded a.lfmRingtoneButtonDropDown span,
.expanded a.lfmRingtoneButtonDropDown strong,
.expanded a.lfmBuyButtonDropDown span,
.expanded a.lfmBuyButtonDropDown strong,
.expanded a.lfmDownloadButtonDropDown span,
.expanded a.lfmDownloadButtonDropDown strong {
    background-position: left center;
}

.buyButtonSupplier {
    padding-right: 7px;
}

.buyButtonSupplier,
.buyButtonSupplier a {
    font-size: 10px;
    line-height: 2;
    color: #0187c5;
}

.buyButtonSupplier .textlink {
    font-weight: bold;
}

.buyButtonSupplier a:hover {
    text-decoration: none;
}

.buyButtonSupplier a:hover .textlink {
    text-decoration: underline;
}


.lfmDropDown {
    display: inline-block;
    z-index: 1;
    padding: 0;
}

ul.lfmDropDownBody {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 0;
    font-size: 10px;
}

.no-js ul.lfmDropDownBody {
    position: relative;
    display: inline;
    display: inline-block;
    margin: 0 1em;
}

ul.lfmDropDownBody li {
    width: auto;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}
ul.lfmDropDownBody li a {
    display: block;
    padding: 0 8px;
    background: #f2f2f2;
    color: #6f6f6f;
    font-weight: normal;
    text-decoration: none;
}
ul.lfmDropDownBody li a:hover {
    background: #6f6f6f;
    color: #f2f2f2;
}
ul.lfmDropDownBody li small {
    margin-left: 4px;
    font-size: 9px;
    font-weight: bold;
}

ul.lfmBuyDropDownBody {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 3px 3px 5px #ccc;
}

.js ul.lfmBuyDropDownBody {
    display: none;
}

.js ul.lfmDropDown-expanded {
    display: inline;
}

ul.lfmBuyDropDownBody li {
    border-bottom-color: #fff;
    font-size: 11px;
    border-top: 1px solid #fff;
}

ul.lfmSmallBuyDropDownBody li {
    font-size: 10px;
}

ul.lfmBuyDropDownBody li.buyType {
    padding: 2px 8px 0 8px;
    color: #999;
}

ul.lfmBuyDropDownBody li.last {
    padding-bottom: 5px;
    border-bottom-color: #ccc;
}

ul.lfmBuyDropDownBody li a {
    position: relative;
    background: #fff;
    color: #000;
    padding: 0 8px;
    padding-right: 60px;
}

ul.lfmBuyDropDownBody li a:hover {
    background: #5297FF;
    color: #fff;
}

ul.lfmBuyDropDownBody li small {
    position: absolute;
    display: block;
    top: 1px;
    right: 8px;
    font-weight: normal;
    display: block;
    width: 50px;
    text-align: right;
    font-size: 10px;
    overflow: visible;
    cursor: pointer;
}

ul.lfmBuyDropDownBody li small .indicator_free,
ul.lfmBuyDropDownBody li small .indicator_onsale {
    position: relative;
    right: -3px;
    font-size: 10px;
}

.a-charts .lfmMultiBuyDialogButton {
    margin: 0 0 1em 0;
}

.r-user.a-library .lfmMultiBuyDialogButton {
    margin: 6px 0 0 0;
} 

.r-user.a-library .lovedtracks.lfmMultiBuyDialogButton {
    margin: 0 0 -4.5em 0;
}

/* Toggles */

.action-button,
.toggleButton {
    display: inline-block;
    border: 1px solid #dad9d9;
    border-color: #dad9d9 #dad9d9 #b3b3b3;
    border-radius: 3px;
    font-size: 12px;
    padding: 5px 10px;
    color: #333;
    text-shadow: rgba(255,255,255,0.5) 0 1px 0;
    background: #ddd;
    background: -moz-linear-gradient(#f0f0f0, #c5c5c5);
    background: -webkit-linear-gradient(#f0f0f0, #c5c5c5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0f0f0, endColorstr=#c5c5c5);
    cursor: pointer;
}

.toggleButton {
    margin: 0 0.5em 0 0;
}

a.toggleButton {
    color: inherit;
}

.ie input.toggleButton {
    margin-right: 1em;
    overflow: visible;
}

.ie9 .action-button,
.ie9 .toggleButton {
    border-radius: 0; /* Filter and border-radius don't play nice  */
}

.action-button:hover,
.action-button:focus,
.toggleButton:hover,
.toggleButton:focus {
    background: #ccc;
    background: -moz-linear-gradient(#f0f0f0, #b3b3b3);
    background: -webkit-linear-gradient(#f0f0f0, #b3b3b3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f0f0f0, endColorstr=#b3b3b3);
    text-decoration: none;
}

.action-button:active {
    background: #bbb;
    color: #666;
    background: -moz-linear-gradient(#ccc, #f0f0f0);
    background: -webkit-linear-gradient(#ccc, #f0f0f0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#f0f0f0);
    border-color: #dad9d9;
}

.action-button[disabled] {
   opacity: 0.5;
   pointer-events: none;
}

/* extends .toggleButton  */
a.activeToggleButton,
.activeToggleButton {
    color: #fff;
    text-shadow: rgba(0,0,0,0.5) 0 1px 0;
    border-color: #3F6373;
    background: #00709C;
    background: -moz-linear-gradient(#00709C, #009CC9);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00709C), to(#009CC9));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00709C, endColorstr=#009CC9);
}

.activeToggleButton:hover,
.activeToggleButton:focus {
    background: #0085B7;
    background: -moz-linear-gradient(#0085B7, #01A9D8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0085B7), to(#01A9D8));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0085B7, endColorstr=#01A9D8);
}

/* calendar */

#page table.calendar {
  width: 158px;
  font-size: 11px;
  line-height: 1em;
  border-collapse: collapse;
  margin-bottom: 2em;
}

#page .sidebar table.calendar {
  margin-bottom: 1em;
}

#page table.chartSelectCalendar {
  margin-bottom: 0;
}

#page table.calendar caption {
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #A0A0A0;
  padding-bottom: 0.5em;
  line-height: 1em;
  margin: 0;
}

#page table.calendar caption a {
  color: #A0A0A0;
  text-decoration: none;
  background-color: transparent;
}

#page table.calendar thead tr th {
  color: #A0A0A0;
  background: #FFF;
  font-weight: normal;
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

#page table.chartSelectCalendar thead tr th {
  border: 1px solid #ccc;
  padding-top: 0.3em;
  padding-bottom: 0.4em;
}

#page table.chartSelectCalendar thead tr th#tableMonthHeading {
  border-left: hidden;
  border-right: hidden;
}

#page table.calendar tbody tr td {
  color: #545454;
  text-align: right;
  border: 1px solid #ccc;
  line-height: 1em;
  vertical-align: bottom;
  padding: 0;
}

#page table.calendar tbody tr td.noday {
  border: none;
  background-color: transparent;
}

#page table.calendar tbody tr td span,
#page table.chartSelectCalendar tbody tr td a,
#page table.chartSelectCalendar tbody tr.nodata td {
  padding: 0.75em 0.25em 0.25em 0;
  display: block;
}

#page table.chartSelectCalendar tbody tr.nodata td {
  display: table-cell;
}

table.calendar tr td { 
    background-color: #eee;
}

table.calendar tr td a {
  padding: 0.75em 0 0 0;
  text-decoration: none;
  margin: 0;
  display: block;  
  font-weight: bold;
  background-color: #fff;
}

#page table.calendar tbody tr td.marker {
  border: none;
  border-left: 1px solid #ccc;
  background-color: transparent !important;
  padding: 0 0 0 0.3em !important;
  vertical-align: middle !important;
}

#page table.calendar tr td.marker img {
  visibility: hidden;
  position: relative;
  top: 0.2em;
}

#page table.calendar tr.selected td.marker img {
  visibility: visible;
}

#page table.calendar tr.invisibleMarker td.marker img,
#page table.calendar tr.nodata td.marker img {
  visibility: hidden;
}

#page table.calendar tr td a:hover,
#page table.calendar tr td.highlight a {
  text-decoration: none;
  background-color: #CCC !important;
}

#page table.chartSelectCalendar tr td a:hover,
#page table.calendar tr.selected td,
#page table.calendar tr.selected td a:hover {
  text-decoration: none;
  background: #E9EBEF !important;
}

#page table.calendar tbody tr td.past,
#page table.calendar tbody tr.nodata td,
#page table.calendar tbody tr td.trailing {
  color: #CCC;
}

#page table.calendar tbody tr.nodata td {
  background: #FFF !important;
}

#page table.calendar thead tr th.weekend {
  font-weight: bold;
}

ul.calendarLegend {
  list-style-type: none;
  margin: 0 0 1.4em 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.25em;
}

ul.calendarLegend li {
  margin: 0 0 0.42em 0;
  padding: 0 0 0 1.5em;
}

ul.calendarLegend li span {
  float: left;
  display: inline;
  width: 1em;
  height: 1em;
  border: 1px solid #ccc;
  margin-left: -1.5em;
}

ul.calendarLegend li span.selected {
  background-color: #E9EBEF;
}

/* calSheet */

span.calSheet {
    display: block;
    text-align: center;
}

a .calSheet {
    cursor: pointer;
}

span.calSheet span {
    display: block;
    float: left;
    width: 100%;
}

span.calSheet span.month {
    background: #D51007;
    background: -moz-linear-gradient(#E21403, #D20F02);
    background: -webkit-linear-gradient(#E21403, #D20F02);
    background: linear-gradient(#E21403, #D20F02);
    border: 1px solid #D51007;
    border-radius: 2px 2px 0 0;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1em;
    font-weight: bold;
    text-align: center;
}

span.calSheet span.day {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 2px 2px;
    border-top: none;
    color: #000;
    line-height: 1.4em;
    font-weight: bold;
    letter-spacing: -0.1em;
}

/* calSheetSmall */

span.calSheetSmall {
    width: 25px;
}

span.calSheetSmall span.month {
    height: 10px;
    font-size: 9px;
}

span.calSheetSmall span.day {
    font-size: 14px;
}

/* calSheetBig, used on artist pages */

span.calSheetBig {
    width: 58px;
    margin-right: 5px;
}

span.calSheetBig span.month {
    background-color: #be0d1d;
}

span.calSheetBig span.month {
    height: 22px;
    line-height: 22px;
    font-size: 13px;
}

span.calSheetBig span.day {
    font-size: 24px;
    height: 35px;
    line-height: 35px;
    letter-spacing: 0;
}


#captcha { 
    margin-top: 10px;
}

#trackMetaData #captcha {
    margin-left: -80px;
}

#captcha fieldset {
    min-height: 140px;
}

#recaptcha_image {
    margin-top: 10px;
    font-size: 11px;
    height: auto !important; /* override inline style */
}

#recaptcha_image img {
    opacity: 0.7;
    filter:alpha(opacity=70);
    border: 1px solid #ccc;
}

#recaptcha_disclaimer {
    padding-top: 0.5em;
    font-size: 10px;
    line-height: 13px;
    color: #999;
}

#composeform #recaptcha_disclaimer {
    padding-left: 0;
}

#recaptcha_disclaimer a {
    color: #999;
}

.recaptcha_options {
    margin-top: 1em;
}

.recaptcha_options li {
    line-height: 16px;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    zoom: 1;
}

.recaptcha_options a { 
    padding-left: 20px;
    display: block; 
}

.recaptcha_option_refresh {
    background: url(http://cdn.lst.fm/flatness/join/captcha/refresh.png) no-repeat;
}

.recaptcha_option_audio {
    background: url(http://cdn.lst.fm/flatness/join/captcha/audio.png) no-repeat;
}

.recaptcha_option_image {
    background: url(http://cdn.lst.fm/flatness/join/captcha/text.png) no-repeat;
}

.recaptcha_option_help {
    background: url(http://cdn.lst.fm/flatness/join/captcha/help.png) no-repeat;
}

.fieldstatus {
    position: relative;
    display: block;
    float: right;
    width: 280px;
    margin: 0 0 0 0;
    font-size: 11px;
    line-height: 14px;
}

/* Narror captcha info boxes for certain types of pages with thin
   column widths */
#shoutboxContainer .fieldstatus,
.shoutboxInput .fieldstatus {
    width: 180px;
    margin-bottom: 10px;
}

/* For areas where we simply can't fit the captcha instructions next
   to the captcha itself */
.journals .shoutboxInput #recaptcha_image {
    clear: both;
}

#trackMetaData #shoutboxContainer .fieldstatus {
    width: 220px;
}

.fieldstatus div {
    padding: 8px 10px;
    color: #666;
    background: #e9e9e9;
    border: 1px solid #dbdbdc;
}

/* creates the larger triangle */
.fieldstatus div:before {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    width:0;
    height:0;
    top:6px; /* controls vertical position */
    left:-21px; /* value = - border-left-width - border-right-width */
    border-width:10px 11px;
    border-style:solid;
    border-color:transparent #dbdbdc transparent transparent;
}

/* creates the smaller  triangle */
.fieldstatus div:after {
    content:"\00a0";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    width:0;
    height:0;
    top:7px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    left:-18px; /* value = - border-left-width - border-right-width */
    border-width:9px 10px;
    border-style:solid;
    border-color:transparent #e9e9e9 transparent transparent;
}

.fieldstatus div.error {
    padding-left: 30px;
    background: #fff9ad url(http://cdn.lst.fm/flatness/components/message/error.png) no-repeat 7px 7px;
    color: #000;
    border-color: #dedcc8;
}

.fieldstatus div.error:before {
    border-color:transparent #dedcc8 transparent transparent;
}

.fieldstatus div.error:after {
    border-color:transparent #fff9ad transparent transparent;
}

.fieldstatus div.ok {
    padding-left: 30px;
    background: #d4e8c9 url(http://cdn.lst.fm/flatness/components/message/ok.png) no-repeat 7px 7px;
    color: #000;
    border-color: #d1d7cf;
}

.fieldstatus div.ok:before {
    border-color:transparent #d1d7cf transparent transparent;
}

.fieldstatus div.ok:after {
    border-color:transparent #d4e8c9 transparent transparent;
}

#editor #captcha {
   position: relative;
}

#shoutboxContainer #captcha label,
#editor #captcha label {
    font-weight: bold;
    font-size: 12px;
}

#shoutboxContainer #captcha input.input,
#editor #captcha input.input {
    width: 148px;
    margin-left: 5px;
}

#editor #recaptcha_response_field_status {
    position: absolute;
    top: 0;
    margin-left: 330px;
}

.ie7 #editor #recaptcha_response_field_status {
    margin-left: 200px;
}


div.catalogueHead {
    position: relative;
}

/* 
    Define stacking order above lower panels for correct FB dialogue display.
    Required as absolutely positioned FB iframe is within this relative context and IE ignores stacking
*/
.ie8 .catalogueHead,
.ie7 .catalogueHead,
.ie6 .catalogueHead {
    z-index: 1;
}

div.catalogueHead h1 {
    display: inline;
    font-size: 18px;
}

/* image */

div.catalogueHead .catalogueImage {
    float: left;
    margin: 0 15px 10px 0;
}

div.catalogueHead .catalogueImage span.image {
    display: block;
    padding: 1px;
    background: #fff;
    border: 1px solid #ccc;
}

div.catalogueHead .catalogueImage span.image span {
    display: block;
    height: auto;
    overflow: hidden;
}

div.catalogueHead .catalogueImage img {
    display: block;
}

div.catalogueHead span.moduleOptions {
    padding: 1px 3px;
    background: #F7F7F7;
}

div.catalogueHead a.catalogueImage:hover {
    text-decoration: none;
}

div.catalogueHead a.catalogueImage:hover span {
    text-decoration: underline;
}

/* stats */

div.catalogueHead p.stats,
div.catalogueHead p.listeningNow {
    margin: 12px 0;
    color: #666;
    font-size: 11px;
    line-height: 1.363636em;
}

div.catalogueHead p.listeningNow {
    margin-bottom: 0;
}

/* buttons */

div.catalogueHead div.buttons {
    margin: 12px 0;
    font-size: 0;
}

.ie6 div.catalogueHead div.buttons .lfmButton,
.ie6 div.catalogueHead div.buttons .indicator {
    margin-bottom: 4px;
}

/* tags */

div.catalogueHead div.tags p {
    font-size: 11px;
    line-height: 1.363636em;
}
div.catalogueHead div.tags h3 {
    margin: 15px 0 0 0;
}

div.catalogueHead p.tags {
    margin: 0;
    padding-right: 20px;
    text-indent: -20px;
    font-size: 11px;
    line-height: 1.181818em;
}


div.catalogueHead p.tags span {
    position: relative;
    left: 20px;
    top: 0;
    color: #0187c5;
}

div.catalogueHead p.tags span img {
    margin-right: 5px;
    vertical-align: middle;
}

div.trackHead div.tags {
    margin-top: 15px;
}


/* comments */

div.catalogueHead p.comments {
    font-size: 11px;
    line-height: 1.181818em;    
}

div.catalogueHead .shoutcount {
    font-size: 11px;
}

div.catalogueHead p.comments {
/*    margin-bottom: 1em;*/
}

div.catalogueHead p.comments img {
    margin: 0 4px 0px 1px;
    vertical-align: bottom;
}


/* album specific */

.albumHead {}

.albumHead div.albumCover {
    float: right;
    margin: 0 0 10px 15px;
}

.albumHead div.albumCover p {
    margin: 5px 0 0 0;
}

.albumHead h1 {
    font-size: 14px;
    font-weight: bold;
}

.albumHead h1 span {
    display: block;
    font-size: 12px;
}

.albumHead h1 a {
    font-weight: bold;
    color: #000;
}

.albumHead h1 a:hover {
    color: #0187c5;
}

/* track specific */

div.trackHead a.featuredAlbum {
    display: inline;
    float: left;
    margin: 0 12px 0 0;
}

div.trackHead h1 {
    font-size: 16px;
    line-height: 1.1875;
    margin-bottom: 0;
}

div.trackHead h1 a {
    color: #000;
}

div.trackHead h1 a:hover {
    color: #0187c5;
    text-decoration: none;
}

div.trackHead h1 .icon {
    vertical-align: baseline;
    margin: 0 5px -3px 0;
}

div.trackHead div.buttons {
    margin: 0.75em 0 0 0;
}

div.trackHead p.featuredAlbums {
    margin: 0;
    font-size: 11px;
    line-height: 1.363636em;
}

div.trackHead span.shoutCount img.icon,
div.albumHead span.shoutCount img.icon,
div.artistHead span.shoutCount img.icon {
    display: none;
}

.catalogue-scrobble-graph {
    background: #eee;
    padding: 0 2px 2px;
    border-radius: 2px;
}

.catalogue-scrobble-graph-top-data {
    float: left;
    margin: 12px 10px;
    line-height: 20px;
}

.catalogue-scrobble-graph-top-data strong {
    display: block;
    font-size: 18px;
}

.catalogue-scrobble-graph-inner-wrapper {
    padding: 6px 10px;
    clear: both;
    border-radius: 2px;
    background: url('http://cdn.lst.fm/flatness/spinner_big_ffffff.gif') center no-repeat #fff;
}

.catalogue-scrobble-graph-title {
    font-size: 12px;
    margin-bottom: 12px;
    color: #999;
}

.catalogue-scrobble-graph iframe {
    max-width: 100%;
}

.catalogue-scrobble-graph-container {
    height: 180px;
}

@media only screen and (max-width: 540px) {
    .catalogue-scrobble-graph-container {
        height: 144px;
    }
}

table.barChart {
  font-family: Arial, Helvetica, Verdana, "Free Sans", "FreeSans", sans-serif;
}

table.barChart td.subject {
  width: 62%;
  background-image: url("http://cdn.lst.fm/depth/charts/barchart_fakeborder.gif");
  background-position: right top;
  background-repeat: repeat-y;
}

table.tagChart td.subject {
  background-image: url("http://cdn.lst.fm/depth/charts/tagchart_fakeborder.gif");
}

table.fullTrackChart td.subject,
table.trackChart td.subject {
  background-image: none;
}

table.barChart td.quantifier {
  width: 38%;
}

table.barChart a {
	background: none;
	padding: 0 0.15em;
}

table.barChart td {
	border-top: solid 1px #DADADA;
	padding: 2px 5px 4px 5px;
	font-size: 12px;
	line-height: 1.16667em;
	vertical-align: top;
}

table.tagChart td {
  border-top: 1px solid #C5D0DD;
}

table.barChart td.subject span {
  height: 1.16667em;
  overflow: hidden;
  display: block;
  padding-right: 8px;
}

table.fullTrackChart td.subject span,
table.trackChart td.subject span {
  padding-right: 0;
}

table.barChart td.position {
	text-align: right;
	color: #969696;
	border-right: solid 1px #B5B5B5;
}

table.barChart td.delta {
	color: #BDBDBD;
	padding-left: 0;
	padding-right: 0;
	font-size: 9px;
	white-space: nowrap;
}

table.barChart td.delta img {
	margin-right: 1px;
}

table.tagChart td.position {
	color: #98AABF;
	border-right: solid 1px #98AABF;
}

table.barChart td.playButtons {
  padding: 2px 0 0 6px;
}

table.barChart td.addToPlaylistButtons {
  padding: 2px 10px 0 4px;
  background-image: url("http://cdn.lst.fm/depth/charts/barchart_fakeborder.gif");
  background-position: right top;
  background-repeat: repeat-y;
}

table.barChart tr:hover td,
table.barChart tr.hover td  {
  background-color: #EEE;
  border-top: solid 1px #B5B5B5;
}

table.tagChart tr:hover td,
table.tagChart tr.hover td  {
  background-color: #E2E8F1;
  border-top: solid 1px #A8B9CC;
}

table.barChart tr:hover td.addToPlaylistButtons,
table.barChart tr:hover td.addToPlaylistButtons {
  color: #FFF;
}

table.barChart tr:hover td.quantifier,
table.barChart tr.hover td.quantifier {
	background-color: #FFF;
	border-top: none;
}

table.barChart td.subject a:hover {
  background: none;
  color: #545454;
}

table.tagChart td.subject a,
table.tagChart td.subject a:hover {
  color: #4B72A9;
}

table.barChart td.quantifier {
	padding: 0;
	color: #FFF;
  border-top: none;
}

table.barChart td.quantifier div {
	background-color: #CCC;
	height: 18px;
	line-height: 18px;
}

table.tagChart td.quantifier div {
	background-color: #C5D0DD;
}

table.barChart td.quantifier div span {
	padding-left: 4px;
	padding-right: 9px;
	background: url("http://cdn.lst.fm/depth/charts/barchart_end.gif") top right no-repeat;
	display: block;
	white-space: nowrap;
}

table.tagChart td.quantifier div span {
	background: url("http://cdn.lst.fm/depth/charts/tagchart_end2.gif") top right no-repeat;
}


/* half-width stuff */

#content table.inlineChart td.subject {
  width: 90%;
  padding: 0;
  background-image: none;
}

#content table.inlineChart td.position {
  color: #969696;
}

#content table.inlineChart td.delta {
  color: #AAA;
}

#content table.inlineChart tr td.playButtons {
  border-bottom: 2px solid #FFF;
  background-image: url("http://cdn.lst.fm/depth/charts/inlinechart_fixed_bg.gif");
  background-position: right top;
  background-repeat: repeat-x;
}

#content table.inlineChart div {
  position: relative;
  padding: 0 5px;
}

#content table.inlineChart span.text {
  position: relative;
  z-index: 5;
  padding: 2px 0;
}

#content table.inlineChart span.percentageBar {
  background-color: #E8E8E8;
  display: block;
  background-image: url("http://cdn.lst.fm/depth/charts/half-width_bg.gif");
  background-position: right center;
  background-repeat: no-repeat;
  position: absolute;
  height: 18px;
  z-index: 0;
  top: 0;
  left: 0;
  min-width: 9px;
}

table.barChart td.counter {
  text-align: right;
  color: #969696;
  white-space: nowrap;
}

#content table.inlineChart tr:hover span.percentageBar,
#content table.inlineChart tr.hover span.percentageBar {
  background-color: #DFDFDF;
  background-image: url("http://cdn.lst.fm/depth/charts/half-width_bg_hover.gif");
}

#content table.inlineChart tr:hover td.subject,
#content table.inlineChart tr.hover td.subject,
#content table.inlineChart tr:hover td.position,
#content table.inlineChart tr.hover td.position,
#content table.inlineChart tr:hover td.delta,
#content table.inlineChart tr.hover td.delta {
  background-image: none;
  background-color: #EEE;
}

#content table.inlineChart tr:hover td.playButtons,
#content table.inlineChart tr.hover td.playButtons {
  border-bottom-color: #EEE;
  background-image: url("http://cdn.lst.fm/depth/charts/inlinechart_fixed_bg_hover.gif");
}

/* add to playlist buttons */
/* See the IE CSS file for some stuff! */

#content table a.addToPlaylist {
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  background-position: left top;
  float: right;
  display: inline;
  margin-top: -1px;
  margin-bottom: -1px;
}

#content table td > a.addToPlaylist {
 visibility: hidden;
 background-image: url("http://cdn.lst.fm/depth/icons/addtoplaylist.gif");
}

#content table a.addToPlaylist span {
  width: 16px;
  height: 16px;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  text-indent: -9999px;
  display: block;
}

#content table tr:hover a.addToPlaylist {
  visibility: visible;
  background-image: url("http://cdn.lst.fm/depth/icons/addtoplaylist.gif");
  background-repeat:no-repeat;
}

#content table tr.previewhover a.addToPlaylist,
#content table tr.flphover a.addToPlaylist,
#content table tr.hover a.addToPlaylist {
  background-image: url("http://cdn.lst.fm/depth/icons/addtoplaylist.gif");
  background-repeat:no-repeat;
}

#content table td a.addToPlaylist:hover {
 background-image: url("http://cdn.lst.fm/depth/icons/addtoplaylist.gif");
 cursor: pointer !important;
}

#content table tr td a.playlistAddProgress,
#content table tr td a.playlistAddProgress:hover {
  background-image: url("http://cdn.lst.fm/depth/global/progress.gif");
  background-position: 0 -2px;
  background-repeat:no-repeat;
}

#content table tr td a.playlistAdded,
#content table tr td a.playlistAdded:hover {
  background-image: url("http://cdn.lst.fm/depth/icons/track_added.gif") !important;
  background-repeat:no-repeat;
}

.cloud {
    font-family: "Helvetica Neue", Arial, Helvetica, Verdana, "Free Sans", "FreeSans", sans-serif;
    font-weight: bold;
    text-align: center;
}
.cloud .cloudItem {
    margin: 5px;
    vertical-align: middle;
    line-height: 1;
}

.collapsibleBox {
    margin-bottom: 36px;
    position: relative;
}

.ie .collapsibleBox {
    zoom: 1;
}

.collapsibleBox-heading h3,
.collapsibleBox-body-inner2,
.collapsibleBox-heading-openclose a {
    border: 1px solid #bbb;
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.collapsibleBox-heading h3 {
    position: relative;
    z-index: 2;

    font-weight: normal;
    background: #ccc;
    padding: 0.7em 1em 0.7em 1em;
    color: #1b1b1b;

    border-radius: 7px 7px 0px 0px; 

    background: #f9f9f9;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
    background: linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);     
}

.ie6 .collapsibleBox-heading h3,
.ie7 .collapsibleBox-heading h3,
.ie8 .collapsibleBox-heading h3 {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );    
}

.ie9 .collapsibleBox-heading h3 {
    background: url();
}

.js .collapsibleBox-heading,
.js .collapsibleBox.s-closed .collapsibleBox-body {
    cursor: pointer;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading h3 {
    position: relative;
    border-bottom: 1px solid #bbb;
    border-radius: 7px;
}

.collapsibleBox-heading h3 {
    font-size: 18px;
    font-weight: normal;
}

.collapsibleBox-heading h3 strong {
    color: #0187c5;
}

/*.js .collapsibleBox.s-closed .collapsibleBox-heading:hover .collapsibleBox-heading-openclose {
    height: 15px;
    background-color: #eef5fc;
    border-top: none;
    margin-top: -10px;
    margin-bottom: -7px;

    border: 1px solid #bbb;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;    

    -webkit-border-radius: 0px 0px 7px 7px; 
       -moz-border-radius: 0px 0px 7px 7px; 
            border-radius: 0px 0px 7px 7px;     
}*/

.collapsibleBox-heading-openclose {
    position: absolute;
    top: 100%;    
    width: 100%;
    z-index: 1;
}

.collapsibleBox-heading-openclose a:before,
.collapsibleBox-heading-openclose a:after {
    content: "";
    position: absolute;
    left: -7px; 
    top: 0;   
    bottom: -1px;
    width: 17px;    
    background: url('http://cdn.lst.fm/flatness/charts/collapsiblebox-tab.gif') -16px 100%;
}

.collapsibleBox-heading-openclose a:after {
    left: auto;
    right: -7px;    
    background-position: -33px 100%;
}


.collapsibleBox-heading-openclose a {
    position: absolute;
    display: block;
    top: -1px;
    left: 50%;
    width: 8em;
    margin-left: -4em;

    background-color: #eef5fc;

    border-top: none;
    border-radius: 0 0 7px 7px;     

    font-size: 11px;
    color: #1b1b1b;
    text-align: center;
    line-height: 22px;    
}


.collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose a,
.collapsibleBox-heading-openclose a:hover,
.collapsibleBox-heading-openclose a:focus,
.collapsibleBox-heading:hover a {
    text-decoration: none;
    color: #0187c5;
}

.collapsibleBox-heading-openclose a span {
    background: url('http://cdn.lst.fm/flatness/charts/2/openclose.png') 100% -97px no-repeat;
    padding-right: 15px;
}

.collapsibleBox-heading-openclose a:hover span,
.collapsibleBox-heading-openclose a:focus span,
.collapsibleBox-heading:hover a span {
    background-position: 100% -147px;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a span {
    background-position: 100% 3px;
}

.js .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose a span,
.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a:hover span,
.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a:focus span,
.js .collapsibleBox.s-closed .collapsibleBox-heading:hover a span {
     background-position: 100% -47px;
}


.collapsibleBox-heading-openclose {
    display: none;    
}

.js .collapsibleBox-heading-openclose {
    display: block;
}

.js .collapsibleBox.s-open .collapsibleBox-heading-openclose a.collapsibleBox-heading-open {
    display: none;
}

.js .collapsibleBox.s-closed .collapsibleBox-heading-openclose a.collapsibleBox-heading-close {
    display: none;
}



.collapsibleBox-body {
    position: relative;
    overflow: hidden;

    -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;  
        -ms-transition-timing-function: ease-out;  
         -o-transition-timing-function: ease-out;  
            transition-timing-function: ease-out;
}

.collapsibleBox-body.s-animated {
    -webkit-transition-property: height, margin-bottom;
       -moz-transition-property: height, margin-bottom;
        -ms-transition-property: height, margin-bottom;  
         -o-transition-property: height, margin-bottom;  
            transition-property: height, margin-bottom;

    -webkit-transition-duration: 0.15s;
       -moz-transition-duration: 0.15s;  
        -ms-transition-duration: 0.15s;  
         -o-transition-duration: 0.15s;  
            transition-duration: 0.15s;
}

.ie .collapsibleBox-body {
    zoom: 1;
}

.js .collapsibleBox.s-closed .collapsibleBox-body {
    height: 10px !important; /* Has to override an inline style set by javascript */
    margin-top: -10px;
}

.js .collapsibleBox.s-closed.s-hover .collapsibleBox-body {
    height: 20px !important; /* Has to override an inline style set by javascript */
    margin-bottom: -10px;
}

.ie6 .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose,
.ie7 .collapsibleBox.s-closed.s-hover .collapsibleBox-heading-openclose {
    margin-top: 10px;
}

.collapsibleBox-body-inner {
    position: relative;
}

.js .collapsibleBox-body-inner {
    bottom: 0;
    width: 100%;
}

.js .collapsibleBox.s-closed .collapsibleBox-body-inner {
    position: absolute;
}

.collapsibleBox-body-inner2 {
    overflow: hidden;
    padding: 15px 10px;    
    background: #eef5fc;
    border-top: none;    
    border: 1px solid #bbb;
    border-top: none;        
    border-radius: 0 0 7px 7px;              
}

/*
 * Custom styled select elements
 *
 * More detailed styles can be found in button.css
*/

/* Wrapper element to enable positioning */
.customSelect-wrap {
    position: relative;
}

/* Set the dimensions of the replaced select element and make it transparent. */
.customSelect-wrap select {
    position: relative;
    z-index: 10;
    opacity: 0;
    margin: 0;
}

.ie .customSelect-wrap select {
    filter: alpha(opacity=0);
}


.customSelect-dummy {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}

.customSelect-dummy-wrap {
    display: block;
    padding-right: 22px;
}

.customSelect-dummy.s-active .customSelect-dummy-wrap {
}

.customSelect-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.dismissRec {
    border: 0;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

.dismissRec button {
    background: none;
    border: none;
    height: 20px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 16px;
}

.dismissRec button:active {
    left: 1px;
    position: relative;
    top: 1px;
}

.recommended .dismissRec button {
    visibility: hidden;
}

.recommended:hover .dismissRec button,
.recommended:active .dismissRec button,
.recommended:focus .dismissRec button {
    visibility: visible;
}

.undo {
    background: #eee;
    display: table;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
}

.undo .msg {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    color: #666;
    font-size: 11px;

}


/* ==========================================================================
   Ecommerce buttons
   ========================================================================== */

/*
 * See /style/ecommerce for example HTML.
 */

.ecommerce-actions {
    position: relative;
}

.content .ecommerce-actions {
    margin-bottom: 3px;
}

.ecommerce-actions {
    width: 100%;
}

.ecommerce-dropdown .ecommerce-btn-text {
    display: block;
    position: relative;
}

.ecommerce-dropdown.has-preferred-retailer .ecommerce-btn-text {
    border-right: 1px solid #d9d9d9;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ecommerce-dropdown.active .ecommerce-btn-text {
    border-bottom: 1px solid #d9d9d9;
}

.ecommerce-dropdown.has-preferred-retailer .ecommerce-btn-text {
    margin-right: 40px;
}

/* Prevent 1px jump when switching to active state */
.ecommerce-dropdown.active {
    margin-bottom:-1px;
}

.ecommerce-single-button {
    width: 100%;
}

.ecommerce-btn-text .price-offer,
.ecommerce-btn-text .price-free {
    color: #cd1223;
}

/* Free download hack for wrapping buttons in varying languages (WEB-15912)
   ========================================================================== */

.is-free-download .ecommerce-btn-text {
    white-space: nowrap;
}

.lang-de .is-free-download .ecommerce-btn-text,
.lang-es .is-free-download .ecommerce-btn-text,
.lang-fr .is-free-download .ecommerce-btn-text,
.lang-pl .is-free-download .ecommerce-btn-text {
    font-size: 11px;
}


/* Disclosure - Split button
   ========================================================================== */

.has-preferred-retailer .btn.iconright--dropdown {
    height: 100%;
}

.has-preferred-retailer .iconright--dropdown {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.has-preferred-retailer.active .iconright--dropdown {
    background-color: #f6f6f6;
    border-right: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-bottom-right-radius: 0;
}

/* Hidden menu
   ========================================================================== */

.ecommerce-dropdown .dropdown-btn-menu {
    border-top: none;
}

.ecommerce-dropdown .additional-info {
    float: right;
    display: block;
}

.ecommerce-dropdown .additional-info-offer,
.ecommerce-dropdown .additional-info-free {
    background-color: #CD1223;
    line-height: 15px;
    border-radius: 2px;
    padding: 2px;
    font-size: 0.9em;
    color: #fff;
}

.ecommerce-dropdown .additional-info-offer {
    margin-right: 3px;
}

/* Retailer icon
   ========================================================================== */

.ecommerce-icon {
    position: relative;
    top: 4px;
    margin-right: 2px;
}

.ecommerce-btn-text.has-retailer-icon {
    padding-right: 40px;
}

.ecommerce-btn-text .ecommerce-icon {
    position: absolute;
    top: 12px;
    right: 15px;
    margin-right: 0;
}

/* Secondary dropdown - smaller
   ========================================================================== */

.ecommerce-dropdown--secondary.has-preferred-retailer .ecommerce-btn-text {
    margin-right: 30px;
}

.ecommerce-dropdown--secondary.has-no-preferred-retailer .ecommerce-disclosure {
    margin-left: -30px;
}

.ecommerce-single-button--secondary.has-retailer-icon {
    padding-right: 35px;
}

.ecommerce-single-button--secondary .ecommerce-icon {
    top: 7px;
    right: 10px;
}


#editor {
	text-align: left;
	margin-top: 2px;
	padding: 2px 0;
	width: 465px;
}

#editor.journalMode {
	width: 685px;
}

#editor #editorTitle,
#editor #message,
#editor #toolbar,
#editorPanel,
#editorPreviewContainer {
 	width: 465px;
}

#editor #statusbar {
	border: 1px solid #F5F5F5;
	height: 1.2em;
	display: none;
	float: left;
}

#editor #bbbuttons {
	padding: 0;
	border: 0;
	margin: 3px 0 0 0;
	clear: both;
}
#editor #faqinserter { 
    clear: left;
}
#editor #faqinserter ul, #editor #faqinserter ul ul { 
    margin-left: 15px;
}


#editor #toolbar {
	margin-top: 4px;
}

#editor #editorPreviewPane {
	background: #FFF;
	margin: 5px 0 10px 0;
	padding: 15px;
	border: 1px solid #DFDFDF;
}

#editor #actionbuttons {
	padding: 3px;
}

#editor .bbbuttons {
  clear: both;
}

#editor .bbbuttons li {
	display: inline;
	float: left;
  margin: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	list-style: none;
	cursor: pointer;
	background: url('http://cdn.lst.fm/depth/buttons/journal_button_01.gif') top left no-repeat;
	padding-left: 4px;
	line-height: 15px;
	font-size: 11px;
	white-space: nowrap;
}

#editor .bbbuttons li.lfm {
    color: #4A71A9;
}

#editor .bbbuttons li span {
    display: block;
    padding-right: 4px;
    background: url('http://cdn.lst.fm/depth/buttons/journal_button_02.gif') top right no-repeat;
}

#journalgroups {
    clear: both;
    margin-top: 15px;
}

#editor #bbbuttons label { 
    display: block;
    margin-bottom: 0.5em;
}

.eventometer {
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    background: url(http://cdn.lst.fm/flatness/components/eventometer/bg.3.png) no-repeat 0 -30px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
}

.eventometer-rec {
    background-position: 0 0;
}

.wikiFactBox h2 {
    margin-top: 1em;
}

.wikiFactBox p {
    margin: 0.5em 0;
}

dl.factbox {
    padding: 0 0 0 111px;
}

dl.factbox dt {
    clear: both;
    display: inline;
    float: left;
    margin: 0 0 0 -111px;
    padding: 7px 0 0 0;
    width: 100px;
}

dl.factbox dd {
    padding: 7px 0 0 0;
    display: block;
}



.festivalLineup li {
    width: 33%;
    float: left;
    display: inline;
}

.festivalLineup li .mini {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 2px 0;
    margin-right: 10px;
}

.festivalLineup li .recommended_small_icon {
    height: 11px;
    width: 11px;
}

.festivalLineup li .full {
    position: relative;
    padding-left: 77px;
    padding-right: 10px;
    min-height: 69px;
}

.festivalLineup .pictureFrame {
    position: absolute;
    left: 0;
    top: 0;
}

#player {
    width: 300px;
    overflow: visible;
    margin-bottom: 30px;
}

#player.shortPlayer {
    height: 221px;
}

#player.lazy {
    position: relative;
    background: url(http://cdn.lst.fm/prototyping/htmlplayer/player.png) 0 0 no-repeat;
    cursor: pointer;
    color: #6E6E6E;
    -moz-border-radius: 2px;
    height: 80px;
    margin-bottom: 20px;
    overflow: hidden;
}

#player .preview {
    display: none;
}

#player.lazy p.artist {
    position: absolute;
    display: block;
    top: 11px;
    left: 93px;
    font-size: 10px;
    color: #fff;
    width: 135px;
    overflow: hidden;
    height: 12px;
}

#player.lazy p.track {
    position: absolute;
    display: block;
    top: 28px;
    left: 93px;
    font-size: 10px;
    color: #fff;
    width: 135px;
    overflow: hidden;
    height: 15px;
}

#player.lazy p.type {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    padding-top: 2px;
    height: 13px;
    background: #FEFEFE;
}

#player.lazy p.type span {
    color: #555;
    font-size: 9px;
}


#LastFooter {
    font-size: 11px;
    text-align: left;
    line-height: 1.181818em;
    margin: 12px 0 0 0;
    color: #000;
    overflow: hidden;
}

.responsive  #LastFooter {
    margin-left: auto;
    margin-right: auto;
}

#footerStuff {
    overflow: hidden;
    background: #eef5fc;
    padding: 12px 0;
    border-radius: 2px;
    line-height: 18px;
    width : 100%;
}

#footerStuff li {
    width: 50%;
    float: left;
    display: inline;
}

.ie6 #footerStuff li,
.ie7 #footerStuff li {
    width: 48%;
}

#footerMessage {
    margin-left: 15px;
}

#footerMessage h3 {
    font-size: 11px;
}

#footerMessage p {
    margin: 0;
}

#uploadYourMusic {
   margin-left: 15px;
}

#footer_content {
    margin: 10px 0 25px 0;
    padding: 0 0 12px;
    background: #E3E3E3;
    border-radius: 2px;
}

#footerLinks {
    padding: 0;
    margin: 0 0 24px 0;
    list-style-type: none;
}

#footerLinks * {
    margin: 0;
    padding: 0;
}

#footerLinks li {
    display: block;
    float: left;
    width: 25%;
}

.ie6 #footerLinks li,
.ie7 #footerLinks li {
    width: 24%;
}

#footerLinks dt {
    width: 177px;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    margin-top: 18px;
    margin-left: 15px;
}

#footerLinks dd {
    margin-bottom: 0.2em;
    margin-left: 15px;
}

.jpLicense {
    background: #fff;
    text-align: center;
    padding: 10px;
    width: 400px;
    margin: 0 auto;
}

#justCantGetEnough {
    border-bottom: 1px solid #ccc;
    margin-left: 15px;
}

#justCantGetEnough blockquote {
    margin-bottom: 12px;
    font-style: italic;
    font-size: 14px;
    color: #777;
}

#legalities {
    position: relative;
    clear: both;
    margin-left: 15px;
    color: #888;
}

#legalities form {
    float: right;
}

#legalities form label {
    display: block;
    margin-bottom: 3px;
    color: #555;
}

#legalities form select {
    margin-right: 0.363636em;
}

#legalities p#copy {
    background: url(http://cdn.lst.fm/flatness/footer/cbsi-music.png) no-repeat -7px 0;
    margin-top: 8px;
    height: 36px;
    padding: 12px 0 0 134px;
}

#legalities p#copy,
#legalities p#copy a {
    color: #666;
    font-size: 10px;
}

#legalities #cbsi_f form {
    position: absolute;
    top: 0;
    right: 0;
}

#legalities #cbsi_f_pop {
    font-weight: bold;
    color: #000;
    margin: 0 0 3px 0;
}

#legalities #cbsi_f_pop a {
    font-weight: normal;
    color: #0187c5;
}

#legalities p#copy span.date{
  color: #999;
}

#footerCopy {
    margin-top: 15px;
    color: #666;
    font-size: 10px;
}

#footerCopy a {
    color: #666;
    text-decoration: underline;
}

#footerCopy a:hover {
    color: #0187c5;
    text-decoration: underline;
}

/* Comments List */

ul.forumComments {
    overflow: visible;
    width: 100%;
    margin-bottom: 2em;
}

ul.forumComments div.comment {
    margin: 0;
    padding: 10px 15px 10px 111px;
    position: relative;
    zoom: 1;
}

ul.forumComments li.odd {
    background: #f5f5f5;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}


/* User Details */

ul.forumComments ul.commentUserDetails {
    display: inline;
}

ul.forumComments ul.commentUserDetails li {
    display: inline;
}

ul.forumComments ul.commentUserDetails li.userName {
    float: left;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userName span,
ul.forumComments ul.commentUserDetails li.userName span a {
    color: #969696;
    text-decoration: none;
}

ul.forumComments ul.commentUserDetails li.userName span a:hover {
    text-decoration: underline;
}

ul.forumComments ul.commentUserDetails li.userThumb {
    clear: left;
    float: left;
    margin-top: 10px;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userThumb a span.userImage {
    display: block;
    float: left;
}


ul.forumComments ul.commentUserDetails li.userDetails {
    clear: left;
    float: left;
    margin-left: -96px;
}

ul.forumComments ul.commentUserDetails li.userDetails span.user span.userType {
    display: none;
}

ul.forumComments ul.commentUserDetails li.date {
    width: 440px;
    display: block;
    text-align: right;
    color: #969696;
    font-size: 11px;
}

/* Actual Content */

ul.forumComments div.comment .wrapper {
    display: block;
    width: 440px;
    position: relative;
    z-index: 20;
}

ul.forumComments div.comment h4 {
    padding-top: 7px;
    margin: 0;
    font-size: 12px;
    color: #252525;
}

ul.forumComments div.comment .messageContent {
    min-height: 6em;
    padding-top: 7px;
}

ul.forumComments div.comment .messageContent a:hover {
    background-color: transparent;
}

ul.forumComments div.comment .messageContent li {
    margin: 0.7em 0 0.7em 2em;
    list-style-position: outside !important;
}

ul.forumComments div.comment .messageContent ul br {
    display: none;
}


/* Signature */

ul.forumComments div.comment div.messageSig {
    margin: 24px -15px 0 -15px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 11px;
    max-height: 100px;
    overflow: hidden;
}

ul.forumComments div.comment div.messageSig a {
    border-bottom: none;
    text-decoration: underline;
}

ul.forumComments div.comment div.messageSig a:hover {
    background: none;
}

/* Quote, Reply Buttons */

ul.forumComments div.comment div.forumLine {
    text-align: right;
    margin-top: 15px;
}

ul.forumComments div.comment div.forumLine a {
    color: #969696;
    font-size: 11px;
}

ul.forumComments div.comment div.forumLine a:hover {
    color: #666;
    background: transparent;
}

/* Quotes */

span.quote {
    display: block;
    margin: 5px 0 1.5em 0;
    padding: 5px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    position: relative;
    zoom: 1;
}

span.quote span.quote {
    margin: 5px 0 0 0;
}

/* superscript in forum signatures */

.messageSig sub,
.messageSig sup {
	line-height: 1.3;
}

div.comment a.entry-title {
  display: none;
}

.forum textarea {
    height: 100px;
}



/* Forum Search Results */
.forumSearchResults .forumCrumb {
    display: block;
    margin: 10px 0 0 0;
    padding: 0 15px;
    font-size: 11px;
    font-weight: normal;
    color: #666;
}

.forumSearchResults .forumCrumb a {
    color: #666;
    border: none;
}

.forumSearchResults .forumCrumb a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.forumSearchResults ul.forumComments .messageSig,
.forumSearchResults ul.forumComments .forumStuff,
.forumSearchResults ul.forumComments .forumLine {
    display: none;
}


/* Recent Discussions (on group pages etc.) */
div.recentDiscussions table td.subject {
    padding: 0 0 10px 50px;
    font-size: 11px;
}

div.recentDiscussions table td.subject span.userImage {
    display: inline;
    float: left;
    margin-left: -50px;
}

div.recentDiscussions table td.subject strong {
    font-size: 12px;
}


div.forumview #topbarForum,
div.forumview #bottombarForum {
	margin-bottom: 15px;
	overflow: hidden;
	clear: both;
	line-height: 2.5;
}

div.forumview #topbarForum .pagination,
div.forumview #bottombarForum .pagination {
    margin: 0;
}

table.forumtable {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 20px;
	border-collapse: collapse;
}

table.forumtable th {
	background: transparent;
	text-align: left;
	font-size: 12px;
	padding: 0 8px 8px 9px;
	color: #666;
}

table.forumtable td {
	padding: 6px 10px 8px 10px;
	vertical-align: top;
	font-size: 12px;
	border-right: solid 1px #E1E1E1;
	border-bottom: solid 1px #E1E1E1;
	border-top: solid 1px #E1E1E1;
}

#LastWebsite table.forumtable td a:hover {
  background-color: transparent;
}

table.forumtable tr.alt td {
	padding-top: 5px;
  background-color: #F5F5F5;
	border-bottom: solid 1px #E1E1E1;
	border-top: solid 1px #E1E1E1;
}

table.forumtable .forumTitle,
table.forumtable .threadTitle {
	width: 50%;
}

table.forumtable .threadTitle strong.sticky {
	color: #4B72A9;
}

table.forumtable .threadTitle strong.hot {
	color: #F98086;
}

table.forumtable .threadTitle a:visited {
	color: #A0A0A0;
}

table.forumtable td.forumTitle small {
	line-height: 1.3;
	font-size: 11px;
}

table.forumtable td.threadTitle small.threadPagination {
	font-size: 12px;
	color: #A0A0A0;
}

table.forumtable td.threadTitle small.threadPagination a {
	color: #A0A0A0;
	padding: 0 0.3em;
	margin: 0 -0.2em;
	text-decoration: none;
}

table.forumtable td.threadTitle small.threadPagination a:hover {
	color: #A0A0A0;
}

table.forumtable td a.author {
    color: #000;
}

table.forumtable .numTopics,
table.forumtable .numPosts {
	width: 5em;
	text-align: center;
}

table.forumtable .numReplies,
table.forumtable .numViews {
	text-align: center;
}

table.forumtable .end,
table.forumtable .lastPost {
	border-right: none;
}

table.forumtable .lastPost small {
	vertical-align: baseline;
	font-size: 11px;
	white-space: nowrap;
}

table.forumtable .lastPost small a {
	text-decoration: none;
}

table.forumtable .lastPost small a:hover {
	color: #545454;
}

table.forumtable tr td.lastPost small a:visited {
	color: #A0A0A0;
}

table.forumtable tr td.lastPost small a:hover:visited {
	color: #A0A0A0;
}

/* reply tracker */

table#replyTrackerTable td {
  line-height: 1.16667;
}

#replyTrackerTable td.msgTitle a:visited {
	color: #A0A0A0;
}

table.forumtable tr td.location a {
  text-decoration: none;
}

table.forumtable tr td.location a {
  color: #545454;
}

/* grapevine */

#posthistorytable.forumtable td.lastPost {
	width: 10em;
}
/*
/* pm inbox */

table.forumtable tr.unreadMsg td {
	font-weight: bold;
}

table.forumtable tr td.msgIcon {
	border-right: none;
	padding-right: 0;
	width: 15px;
	padding-left: 5px;
}

table.forumtable tr td.msgIcon img {
	float: right;
}

.excerpts {
	clear: both;
}

/* Quick tweaks for rules */

#forumRules #content h1 {
    margin: 1em 0;
}

#forumRules ul.rules li {
    margin: 1em 0;
}

#forumRules dt {
    font-weight: bold;
    display: block;
    margin: .8em 0 0;
}

#forumRules dd {
    display: block;
    margin: .1em 0 .4em;
}

#forumRules dd input {
    margin-right: 3px;
}


/* Forum Search Box */
#forumsearch {
    margin: 0 0 20px 0;
    padding: 10px 15px;
    background: #f5f5f5;
}

#forumSearchInput {
    font-size: 12px;
    width: 160px;
    padding: 1px 3px;
    margin: 0;
    border: 1px solid #ccc;
}

a#advancedSearch {
    margin: 0 0 0 1em;
    font-size: 11px;
    cursor: pointer;
}

fieldset#advancedOptions {
    margin: 1em 0 0 0;
}

#resultsOrder {
    font-size: 11px;
    text-align: right;
    line-height: 3em;
}

#faqs {
    font-size: 12px;
    line-height: 1.5em;
}


a.icon:hover {
    text-decoration: none !important;
}
a.icon:hover span,
a.icon:hover strong {
    text-decoration: underline !important;
}

img.comment_icon {
    margin: 0 3px -2px 0;
}
img.journal_icon {
    margin: 0 5px -5px 0;
}
img.new_journal_icon {
    margin: 0 4px -4px 0;
}
img.tag_icon {
    margin: 0 6px -1px 0;
}
img.mail_icon {
    margin: 0 4px 0 0;
}
img.playingnow_icon {
    margin: 0 0 -2px 2px;
}
img.play_icon {
    margin: 0 4px -4px 0;
}
img.dismiss_icon {
    margin: 0 4px -2px 0;
}
img.feed_small_icon {
    margin: 0 4px -1px 0;
}
img.cal_icon {
    margin: 0 4px 0 2px;
}
img.feed_icon,
img.ics_icon,
img.ical_icon,
img.google_cal_icon,
img.google_cal_small_icon,
img.outlook_cal_icon {
    margin: 0 4px 0 0;
}
img.ics_small_icon {
    margin: 0 4px -1px 0;
}
img.itunes_icon {
    margin: 0 4px -4px 0;
}
img.itunes_small_icon {
    margin: 0 4px -1px 0;
}
img.print_icon {
    margin: 0 4px -3px 0;
}
img.edit_icon {
    margin: 0 0 -5px 0;
}
img.loved_indicator_icon {
    margin: 0 4px 0 0;
}
img.playlist_icon {
    margin: 0 4px -1px 0;
}
img.radio_large_icon {
    margin: 0 5px 0 0;
}
img.recommended_icon {
    margin: 0 5px 0 0;
}
img.attending_icon {
    margin: -3px 0 -6px 0;
}
img.maybeattending_icon {
    margin: -3px 0 -6px 0;
}
img.eventclash_icon {
    margin: -3px 0 -6px 0;
}
img.flag_icon {
    margin: 0 0 -5px 0;
}
img.ticket_icon {
    margin: 0 4px 0 0;
}
img.settings_icon {
    margin: 0 3px -1px 0;
}
img.up_icon {
    margin: 0 3px 0 0;
}
img.ss-hypem_icon {
    margin: 0 3px -3px 0;
}

img.warning_icon {
    margin: 0 5px -2px 0;
}

img.staff_icon,
img.subscriber_icon,
img.moderator_icon {
    margin: 0 2px 6px 0;
}

/* Resource icons */
img.res_track_icon,
img.res_artist_icon,
img.res_album_icon {
    margin: 0 4px -4px 0;
}
img.scrobbling_icon {
    margin: 0 1px -5px 0;
}

/* IN THE LONG RUN, THIS SHOULD REPLACE ALL THE ABOVE */

img.icon {
    background-image: url('http://cdn.lst.fm/flatness/sprites/21/icons.png');
}
.ie6 img.icon {
    background-image: url('http://cdn.lst.fm/flatness/sprites/21/icons.IE6.png');
}


.flag_uk_icon       { background-position: 0 0; }
.flag_de_icon       { background-position: 0 -20px; }
.flag_es_icon       { background-position: 0 -40px; }
.flag_fr_icon       { background-position: 0 -60px; }
.flag_it_icon       { background-position: 0 -80px; }
.flag_jp_icon       { background-position: 0 -100px; }
.flag_pl_icon       { background-position: 0 -120px; }
.flag_pt_icon       { background-position: 0 -140px; }
.flag_ru_icon       { background-position: 0 -160px; }
.flag_se_icon       { background-position: 0 -180px; }
.flag_tr_icon       { background-position: 0 -200px; }
.flag_zh_icon       { background-position: 0 -220px; }
.globe_icon         { background-position: 0 -240px; }
.ss-amarok_icon     { background-position: 0 -260px; }
.ss-wmp_icon        { background-position: 0 -280px; }
.ss-itunes_icon     { background-position: 0 -300px; }
.ss-wa2_icon        { background-position: 0 -320px; }
.ss-iphone_icon     { background-position: 0 -340px; }
.ss-logitech_icon   { background-position: 0 -360px; }
.ss-playdar_icon    { background-position: 0 -380px; }
.ss-lfm_icon        { background-position: 0 -400px; }
.ss-spotify_icon    { background-position: 0 -420px; }
.ss-android_icon    { background-position: 0 -440px; }
.ss-generic_icon    { background-position: 0 -460px; }
.ss-denon_icon      { background-position: 0 -1880px; }
.settings_icon      { background-position: 0 -500px; }
.flag_icon          { background-position: 0 -520px; }
.eventclash_icon    { background-position: 0 -540px; }
.maybeattending_icon{ background-position: 0 -560px; }
.attending_icon     { background-position: 0 -580px; }
.recommended_icon   { background-position: 0 -600px; }
.ticket_icon        { background-position: 0 -640px; }
.moderator_icon     { background-position: 0 -660px; }
.subscriber_icon    { background-position: 0 -680px; }
.alumni_icon         { background-position: 0 -1900px; }
.staff_icon         { background-position: 0 -700px; }
.edit_icon          { background-position: 0 -720px; }
.tag_icon           { background-position: 0 -740px; }
.itunes_icon        { background-position: 0 -880px; }
.outlook_cal_icon   { background-position: 0 -900px; }
.google_cal_icon    { background-position: 0 -920px; }
.ical_icon          { background-position: 0 -940px; }
.ics_icon           { background-position: 0 -940px; }
.cal_icon           { background-position: 0 -960px; }
.feed_small_icon    { background-position: 0 -1000px; }
.loved_icon         { background-position: 0 -1020px; }
.unloved_icon       { background-position: 0 -1040px; }
.loved_indicator_icon { background-position: 0 -1060px; }
.loved_indicator_charts_icon { background-position: 0 -1940px; }
.play_icon          { background-position: 0 -1080px; }
.dismiss_icon       { background-position: 0 -1120px; }
.comment_icon       { background-position: 0 -1220px; }
.journal_icon       { background-position: 0 -1240px; }
.new_journal_icon   { background-position: 0 -1260px; }
.addtofriends_icon  { background-position: 0 -1280px; }
.isfriend_icon      { background-position: 0 -1300px; }
.mailuser_icon      { background-position: 0 -1320px; }
.up_icon            { background-position: 0 -1340px; }
.radio_play_icon    { background-position: 0 -1380px; }
.radio_tag_icon     { background-position: 0 -1400px; }
.radio_playlists_icon   { background-position: 0 -1420px; }
.act_created_icon   { background-position: 0 -1440px; }
.act_added_icon     { background-position: 0 -1460px; }
.act_connected_icon { background-position: 0 -1480px; }
.act_disconnected_icon  { background-position: 0 -1500px; }
.act_befriended_icon        { background-position: 0 -1520px; }
.act_updatedpermissions_icon    { background-position: 0 -1540px; }
.act_joined_icon    { background-position: 0 -1560px; }
.act_left_icon      { background-position: 0 -1580px; }
.act_attending_icon { background-position: 0 -1600px; }
.act_maybeattending_icon    { background-position: 0 -1620px; }
.act_notattending_icon  { background-position: 0 -1640px; }
.act_tagged_icon    { background-position: 0 -1680px; }
.act_loved_icon     { background-position: 0 -1700px; }
.act_recommended_icon   { background-position: 0 -1720px; }
.ss-xbox_icon       { background-position: 0 -1740px; }
.ss-grooveshark_icon   { background-position: 0 -1800px; }
.ss-scrobbling_icon { background-position: 0 -1820px; }
.mobile_icon        { background-position: 0 -1860px; }
.scrobbling_icon        { background-position: 0 -1820px; }
.radio_small_icon        { background-position: 0 -1840px; }
.dismiss_blue_icon  { background-position: 0 -1920px; }
.share_facebook_icon  { background-position: 0 -1960px; }
.share_twitter_icon  { background-position: 0 -1980px; }
.share_send_icon  { background-position: 0 -2000px; }

img.icon_32 {
    background-image: url('http://cdn.lst.fm/flatness/sprites/21/icons_32.png');
}
.location_icon_32 { background-position: 0 0; }
.calendar_icon_32 { background-position: 0 -32px; }


/* preview_icon spriting should be moved in to it's own file  */

img.preview_icon {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url(http://cdn.lst.fm/flatness/preview/1/sprite.png) !important;
    vertical-align: middle;
}

.ie6 img.preview_icon {
    background-image: url(http://cdn.lst.fm/flatness/preview/1/sprite.IE6.png) !important;
}

a.previewbutton:hover img.preview_icon {
    background-position: 0 -16px;
}


.indicator_new {
    height: 24px;
    display: -moz-inline-box;
    display: inline-block;
    padding: 0 3px 0 0;
    background: url("http://cdn.lst.fm/flatness/red_new_box.2.png") no-repeat right bottom;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    text-shadow: #163551 0 -1px 1px;
    overflow: hidden;
}

.indicator_new span {
    height: 21px;
    padding: 1px 5px 2px 9px;
    background: url("http://cdn.lst.fm/flatness/red_new_box.2.png") no-repeat left top;
    display: -moz-inline-box;
    display: inline-block;
    line-height: 20px;
    vertical-align: top;
}

a.indicator_new:hover {
    color: #eee;
}

.indicator_onsale {
    padding: 0 3px;
    background: #ef0a00;
    color: #fff;
    font-size: 9px;
    border: 1px solid #b70800;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.indicator_free {
    padding: 0 3px;
    line-height: 11px;
    background: #fd9d36;
    color: #fff;
    font-size: 9px;
    border: 1px solid #ed821b;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    text-decoration: none;
    font-weight: normal;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

#page a:hover .indicator_free,
#page a:hover .indicator_onsale {
    text-decoration: none !important;
}

div#calendar table.interactive {
    display: none;
}
div#calendar table.first {
    display: table;
}
div#calendar table.controls {
    margin: -1px 0 0 0;
    width: 158px;
    position: absolute;
}
div#calendar table.controls td a {
    text-decoration: none;
}
div#calendar table.controls td a {
    display: block;
    width: 17px;
    line-height: 15px;
}
div#calendar table.controls td.next a {
    background:url(http://cdn.lst.fm/depth/global/arrow_r.png) top left no-repeat;
}
div#calendar table.controls td.prev a {
    background:url(http://cdn.lst.fm/depth/global/arrow_l.png) top right no-repeat;
}
div#calendar table.controls td.next a:hover {
    background-image:url(http://cdn.lst.fm/depth/global/arrow_r_hover.png);
}
div#calendar table.controls td.prev a:hover {
    background-image:url(http://cdn.lst.fm/depth/global/arrow_l_hover.png);
}
div#calendar table.controls td.next a.busy, div#calendar table.controls td.next a:hover.busy {
    background-image:url(http://cdn.lst.fm/depth/global/arrow_r_anim.gif);
}
div#calendar table.controls td.prev a.busy, div#calendar table.controls td.prev a:hover.busy {
    background-image:url(http://cdn.lst.fm/depth/global/arrow_l_anim.gif);
}
div.interactive caption {
    text-align: center !important;
    width: 158px;
    padding-top: 2px;
}
/*
div#eventsNav ul li.pickadate {
  padding-top: 5px;
}
*/


/* Album Cover
   =========== */

span.albumCover {
    position: relative;
    display: block;
}
a span.albumCover {
    cursor: pointer;
}
span.coverSmall {
    width: 37px;
    height: 36px;
}
span.coverMedium {
    width: 75px;
    height: 67px;
}
span.coverLarge {
    width: 138px;
    height: 131px;
}
span.coverMega {
    width: 194px;
    height: 184px;
}

span.albumCover img.art {
    display: block;
    position: absolute;
}

span.coverSmall img.art {
    clip: rect(0,34px,34px,0);
    left: 3px;
    top: 1px;
}
span.coverMedium img.art {
    clip: rect(0,64px,64px,0);
    left: 7px;
    top: 2px;
}
span.coverLarge img.art {
    clip: rect(0,126px,126px,0);
    left: 11px;
    top: 3px;
}
span.coverMega img.art {
    clip: rect(0,174px,174px,0);
    top: 5px;
    left: 15px;
}



span.albumCover img  { display: block; }

span.albumCover span.jewelcase {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: left top;
}

/* TODO: correct width and height */

span.coverSmall span.jewelcase {
    width: 37px;
    height: 36px;
    background-image: url(http://cdn.lst.fm/flatness/catalogue/album/jewelcase_small.png);
}
.ie6 span.coverSmall span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/catalogue/album/jewelcase_small.png', sizingMethod='crop');
}

span.coverMedium span.jewelcase {
    width: 73px;
    height: 68px;
    background-image: url(http://cdn.lst.fm/flatness/catalogue/album/jewelcase_medium.png);
}
.ie6 span.coverMedium span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/catalogue/album/jewelcase_medium.png', sizingMethod='crop');
}

span.coverLarge span.jewelcase {
    left: 0px;
    width: 141px;
    height: 134px;
    background-image: url(http://cdn.lst.fm/flatness/catalogue/album/jewelcase_large.png);
}
.ie6 span.coverLarge span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/catalogue/album/jewelcase_large.png', sizingMethod='crop');
}
span.coverMega span.jewelcase {
    left: 0px;
    width: 194px;
    height: 184px;
    background-image: url(http://cdn.lst.fm/flatness/catalogue/album/jewelcase_mega.png);
}
.ie6 span.coverMega span.jewelcase {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/catalogue/album/jewelcase_mega.png', sizingMethod='crop');
}

span.albumCover span.tracks {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1px 3px;
    color: #fff;
    font-size: 10px;
    background: #333;
}

/* ==========================================================================
   Lab disclaimer
   ========================================================================== */

body .lab-disclaimer {
    position: relative;
    padding-left: 42px;
}

.lab-disclaimer-small {
    font-size: 12px;
    color: #666;
}

.lab-disclaimer-small a,
.lab-disclaimer-small a:hover,
.lab-disclaimer-small a:focus {
    color: #666;
}

.lab-disclaimer-about {
    background-image: url(http://cdn.lst.fm/flatness/labs/labs_12.png);
    background-repeat: no-repeat;
    background-position: 0 -2px;    
    padding-left: 22px;
}

.lab-disclaimer-about:hover {
    background-position: 0 -20px;
}

#launcher input#userInput {
    display: inline;
    float: left;
    width: 238px;
    height: 16px;
    line-height: 16px;
    margin: -1px 7px 0 0;
    padding: 1px 5px;
    border: 1px solid #505050;
    outline: 0;
    font-size: 11px;
    font-weight: bold;
}

#launcher p {
    clear: left;
    margin: 5px 0 0 3px;
    font-size: 11px;
    color: #ccc;
}


#launcher #searchTypes {
    margin: 0 0 3px 0;
}

#launcher #searchTypes li {
    font-size: 11px;
    line-height:12px;
    float: left;
    font-weight: bold;
    margin: 0 5px 5px 0;
    padding: 0 5px 0 0;
    border-right: 1px solid #505050;
    text-shadow: #505050 0 -1px 1px;
}

#launcher #searchTypes li.last {
    border-right: 0;
}
#launcher #searchTypes li a {
    color: #ccc;
}
#launcher #searchTypes li a:hover {
    color: #fff;
    text-decoration: none;
}
#launcher #searchTypes li.selected a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

#launcher .smallPlayButton {
    width: 23px;
    height: 22px;
    margin-top: -1px;
    background: url(http://cdn.lst.fm/flatness/listen_v2/play_ondark_23x22_rest.png) no-repeat;
    border: 0;
}

#launcher .smallPlayButton:hover {
    background: url(http://cdn.lst.fm/flatness/listen_v2/play_ondark_23x22_onhover.png) no-repeat;
}

.lyrics-snippet-container {
    background-image: url(http://cdn.lst.fm/flatness/responsive/2/quote_sprite.png);
    background-repeat: no-repeat;
    margin-top: 24px;
}

.lyrics-snippet-container .lyrics-snippet {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-style: italic;
    font-size: 15px;
    color: #666;
    background-image: url(http://cdn.lst.fm/flatness/responsive/2/quote_sprite.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    padding-left: 46px;
    padding-right: 46px;
    margin-bottom: 12px;
    min-height: 24px;
    word-wrap: break-word;
}

.lyrics-source-icon {
    margin-right: 8px;
}


/** Player */

#player.maintenance {
    width: auto;
    padding: 10px;
    background: #d6efff;
    border: solid 1px #a5d7ef;
    font-size: 11px;
    line-height: 1.454545em;
    color: #333;
}

.media-links {
    border-top: 1px solid #dbdbdb;
    padding-top: 6px;
}

.media-link .media {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
    margin-bottom: 6px;
}

div.messageBox {
    margin: 15px 0;
}
.form div.messageBox {
    margin: 0;
}

div.messageBox span.messageWrapper {
    padding: 0.125em 0.5em 0.25em 25px;
    font-weight: normal;
    line-height: 1.3em;
}

div.successMessage span.messageWrapper {
    background: url(http://cdn.lst.fm/flatness/messageboxes/success.png) 0.5em center no-repeat #d6ebcc;
}
div.errorMessage span.messageWrapper, div.dialogErrorMessage {
    background: url(http://cdn.lst.fm/flatness/messageboxes/error.png) 0.5em center no-repeat #ffeacc;
}

div.inlineMessage {
    background: #ffeacc;
    display: inline-block;
    margin: 0 0 0 0.5em;
    padding: 0.125em 0.5em 0.25em;
}

div.dialogErrorMessage {
    margin: 0;
    padding: 2px 2px 2px 25px;
}

.ie7 div.successMessage span.messageWrapper {
    background-position: 0.5em top;
}

.ie7 div.errorMessage span.messageWrapper {
    background-position: 0.5em top;
}

div.infoMessage span.messageWrapper,
div.warnMessage span.messageWrapper,
div.artistMessage span.messageWrapper,
div.infoMessageBlock,
div.warnMessageBlock,
div.artistMessageBlock,
div.betaMessage span.messageWrapper {
    padding: 0.125em 0.5em 0.25em 0.5em;
}
div.infoMessage span.messageWrapper,
div.infoMessageBlock {
    background:  #e4f1ff;
}
div.warnMessage span.messageWrapper,
div.warnMessageBlock {
    background: #ffeacc;
}
div.artistMessage span.messageWrapper,
div.artistMessageBlock {
    background:  #f1e4ff;
}

div.betaMessage span.messageWrapper,
div.betaMessageBlock {
    background:  #e1f5ff;
}
div.betaMessageBlock {
    position: relative;
    padding: 5px 10px;
    border: 1px solid #bddcfe;
    font-size: 11px;
    color: #333;
}
div.betaMessageBlock h3 {
    margin-bottom: 2px;
}
div.betaMessageBlock h3 a {
    color: #000;
}

div.betaMessageBlock h3 a.feedback {
    float: left;
}

/* Beta-bar strip on beta features */
#content > div.betaMessageBlock {
    margin: -1px;
}

div.nodataMessageBlock,
div.nodataMessage span.messageWrapper {
    padding: 0.5em;
    background: #f2f2f2;
    border: 1px solid #ccc;
}

div.rightCol div.nodataMessageBlock,
div.rightCol div.nodataMessage span.messageWrapper {
    background: #e3e3e3;
}

.emptyMessage {
    color: #aaa;
    font-size: 14px;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

div.newbieMessage {
    padding: 1em;
    background: #eef5fc;
    border-radius: 5px;
}

div.dismissMessage {
    margin: 0 0 15px 0;
    padding: 5px 18px 5px 5px;
    border: 5px solid #fff;
    border-radius: 5px;
    background: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1.272727;
}
div.dismissMessage img.delete_icon {
    float: right;
    position: relative;
    left: 13px;
}
div.dismissMessage h3 {
    margin-bottom: 10px;
}
div.dismissMessage p {
    color: #666;
}
div.dismissMessageGrey {
    background: #eee;
    border-color: #eee;
}
div.dismissMessageSmall {
    padding: 3px;
    font-size: 10px;
    line-height: 1.4;
}
div.dismissMessage p.icons {
    margin: 20px 0 0 0;
}
div.dismissMessage p.icons img {
    margin: 0 5px;
}
div.dismissMessageSmall p.icons img {
    margin: 0 3px;
}
div.dismissMessage p.icons a.multiline {
    float: left;
    text-decoration: none;
}
div.dismissMessage p.icons a.large:hover span {
    text-decoration: underline;
}

div#radioTrialMessage {
    position: relative;
    border-color: #a5d7ef;
    background: #d6efff;
    color: #636363;
    border-width: 1px;
    margin: 10px 0 0 0;
    padding: 10px 10px 0 10px;
    font-size: 11px;
    line-height: 1.181818;
    z-index: 500;
}
div#radioTrialModal {
    z-index: 490px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}
div#radioTrialMessage p,
div#radioTrialMessage.dismissMessageGrey p {
    color: #000;
}
div#radioTrialMessage h3 {
    font-size: 12px;
    margin-bottom: 5px;
}
div#radioTrialMessage div.inYourFace {
    padding-bottom: 5px;
}
div#radioTrialMessage div.inYourFace h3 {
    margin-bottom: 10px;
    font-size: 19px;
}
div#radioTrialMessage div.inYourFace p {
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.333333;
    color: #636363;
}
div#radioTrialMessage.trialStart,
div#radioTrialMessage.trialEnd,
div#radioTrialMessage.subscribe {
    text-align: left;
    margin: 0 0 10px 0;
}
div#radioTrialMessage.trialStart div.inYourFace,
div#radioTrialMessage.trialEnd div.inYourFace,
div#radioTrialMessage.subscribe div.inYourFace {
    padding-bottom: 5px;
}
div#radioTrialMessage.trialStart div.inYourFace h3,
div#radioTrialMessage.trialEnd div.inYourFace h3,
div#radioTrialMessage.subscribe div.inYourFace h3 {
    margin-bottom: 10px;
    font-size: 19px;
}
div#radioTrialMessage.trialStart div.inYourFace p,
div#radioTrialMessage.trialEnd div.inYourFace p,
div#radioTrialMessage.subscribe div.inYourFace p {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.333333;
    color: #636363;
}

div#radioTrialMessage.dismissMessageGrey strong {
    color: #000;
}

div#radioTrialMessage table.trialLeft {
    width: 100%;
    margin: 10px 0 15px 0;
    line-height: 8px;
}
div#radioTrialMessage table.trialLeft td {
    width: 25%;
    padding: 0 5px;
    color: #666;
    text-align: left;
    vertical-align: middle;
}
div#radioTrialMessage table.trialLeft td.first {
    text-align: right;
}
div#radioTrialMessage table.trialLeft td.progressCell {
    width: 50%;
    padding: 0;
}
div#radioTrialMessage table.trialLeft div.progress {
    margin: 0;
    height: 8px;
    border: 1px solid #9c9b9b;
    background: #eee;
}
div#radioTrialMessage.dismissMessageGrey table.trialLeft div.progress {
    background: #fff;
}
div#radioTrialMessage div.progress div {
    height: 100%;
}
div#radioTrialMessage span.used {
    float: right;
}

div#radioTrialMessage.homeExpired {
    margin: 0 0 10px 0;
    text-align: left;
}
div#radioTrialMessage.homeExpired h3 {
    color: #636363;
}
div#radioTrialMessage.homeExpired p {
    text-align: center;
    color: #636363;
}

div#imageBlockingWarning {
    padding: 1em;
}

div#imageBlockingWarning h3 {
    margin: 0 0 1em;
}

.cta-sidebarMessage {
    position: relative;
    padding: 8px 10px;
    margin-left: 10px;
    background: #fef598 !important;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.333333;
}

/* creates triangle */
.cta-sidebarMessage:after {
    content:"\00a0";
    display:block;
    position:absolute;
    z-index:1;
    top: 10px;
    left: -20px;
    bottom: auto;
    width:0;
    height:0;
    border-width:10px 10px;
    border-style:solid;
    border-color: transparent #fef598 transparent transparent;
}


.metaBadge {
    padding-left: 35px;
    position: relative;
    margin: 1em 0;
}

.metaBadge strong {
    font-size: 14px;
}

.metaBadgeLocation strong a {
    color: inherit;
}

.metaBadge .badge {
    position: absolute;
    left: 0;
    top: 4px;
}

.metaBadgeLocation .badge {
    top: -3px;
    left: -3px;
}

.metaBadgeDate a:focus,
.metaBadgeDate a:hover {
    text-decoration: none;
}

.metaBadgeDate a:focus .linkTitle,
.metaBadgeDate a:hover .linkTitle {
    text-decoration: underline;
}

ul.minifeedSmall li {
    padding: 3px 0 3px 25px;
    border-bottom: 1px solid #ddd;
    font-size: 11px;
}

ul.minifeedSmall li img.icon {
    display: inline;
    float: left;
    margin: 0 0 0 -25px;
}

.ie6 ul.minifeedSmall li {
    zoom: 1;
}

ul.minifeedSmall li.last {
    border: none;
}

ul.minifeedSmall li a {
    color: #0187c5;
    text-decoration: none;
}

ul.minifeedSmall li a:hover {
    text-decoration: underline;
}

ul.minifeedSmall li span.date {
    color: #999;
}

ul.minifeedSmall a.removeActivity img.icon {
    float: none;
    margin: 0 4px;
    vertical-align: middle;
}

.month-picker {
    position: relative;
    width: 100%;    
}

.content .month-picker--bottom {
    margin-bottom: 0;
}

.month-picker-next {
    position: absolute;
    right: 0;
}

.month-picker-previous {
    position: absolute;
    left: 0;
}

.month-picker-dropdowns {
    position: relative;
    left: 50%;
    width: 50%;
    margin-left: -130px;
}

.month-picker-dropdowns .dropdown-btn-wrapper {
    float: left;
    margin-right: 10px;
}

.month-picker-dropdown-year {
    width: 100px;
}

.month-picker-dropdown-month {
    width: 150px;    
}

/** New newsfeed / prototyping */

ul.newsfeedMedium {
    margin: 5px 0;
}

ul.newsfeedMedium li {
    position: relative;
    padding: 5px 100px 5px 30px;
}

ul.newsfeedMedium li.odd {
    background: #f7f7f7;
}

ul.newsfeedMedium li span.date {
    position: absolute;
    top: 5px;
    right: 5px;
}

/** Posts and shouts */

ul.newsfeedMedium .excerpt {
    margin: 5px 0 10px;
    padding: 0 0 0 10px;
    
    color: #666;
    border-left: 5px solid #ddd
}

ul.newsfeedMedium div.excerpt img {
    float: none;
    margin-left: 0;
}

ul.newsfeedMedium div.resourceExcerpt {
    padding-left: 45px;
}

ul.newsfeedMedium div.resourceExcerpt img {
    float: left;
    margin-left: -43px;
}

/** Images */

ul.newsfeedMedium div.imageExcerpt img {
    float: left;
    padding: 1px;
    border: 1px solid #999;
    margin: 0 5px 5px 0;
}

ul.newsfeedMedium span.more {
    display: block;
    clear: both;
}

/** Events */

ul.newsfeedMedium span.calSheet {
    float: left;
    width: 26px;
    margin-left: -37px;
    margin-top: 3px;
}

/** Legacy newsfeed CSS, is this used at all? */


/* Noobstrap */

#noobWelcome {
    margin: 0 0 0 0;
    padding: 10px 10px 0 10px;
    border: 5px solid #e4f1ff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #e4f1ff;
}
#library #noobWelcome {
    width: 500px;
}
#noobStrapForm {
    margin: 10px 0 0 0;
}
#noobStrapForm .infoMessage {
    margin: 0;
}
#noobStrapForm textarea#noobStrapTextarea {
    display: block;
    height: 150px;
    width: 98%;
    margin: 0 0 11px 0;
    font-size: 16px;
}

#postStrap {
    margin: 5px 0 15px 0;
    padding: 2px 15px;
    border: 5px solid #e4f1ff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #e4f1ff;
    font-size: 11px;
    line-height: 1.636364;
}
#postStrap p {
    margin: 5px 0;
}

/* generic */

.noobstrap {
    padding: 10px;
    border: 5px solid #e4f1ff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #e4f1ff;
}

.noobstrap h3 {
    color: #D51007;
    clear: both;
}

.noobstrap p.big {
    font-size: 14px;
}

.noobstrap .box {
    margin: 15px 0 0 0;
    padding: 5px 10px 5px 10px;
    border: 5px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #fff;
    overflow: hidden;
}

.noobstrap .screenshots {
    padding: 15px 0 0 15px;
}

.ie6 .noobstrap .box,
.ie6 .noobstrap .screenshots {
    height: 1%;
    overflow: auto;
}

.noobstrap .screenshots p {
    max-width: 26em;
}

.noobstrap .screenshots .screenshot {
    float: right;
    display: inline;
    width: 132px;
    color: #666;
    font-size: 10px;
    margin: -15px 0 0 15px;
    text-align: center;
}

.noobstrap .screenshots .screenshot img {
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

/*
Example HTML:

<div id="nrelate_related_placeholder" data-require="nrelate" data-url="http://nrelate-web-16169.thomash.dev.last.fm/music/Danger" data-widget-id="110" data-page-type-id="6650">
    <div id="nrelate_related_0" class="nrelate nrelate_related nr_clear nrelate_none nr_110 nr_2col nr_setup">

        <div class="nr_content">
            <h3 class="nr_title">
                <span>We Recommend</span>
            </h3>
            <div class="nr_inner">
                <ul>
                    <li><a class="nr_rc_link nr_link nr_internal" href="#">
                        <span class="nr_post_title">Our unrelated content link</span>
                    </a></li>
                    ...
                </ul>
            </div>
        </div>

        <div class="nr_partners">
            <h3 class="nr_title">From Around the Web</h3>
            <div class="nr_inner">
                <ul>
                    <li> <a class="nr_rc_link nr_link nr_partner" href="#" target="_blank" rel="nofollow">
                        <span class="nr_post_title">Some random Joe's unrelated content link</span>
                    </a><span class="nr_source">SovialVibe</span></li>
                    ...
                </ul>
            </div>
            <div style="clear:both;"></div>
        </div>

        <div style="font-size: 0.7em; color: rgb(170, 170, 170); text-align: right; clear: both; ">
            <span title="about these links" style="cursor: pointer; " class="nr_about">about these links</span>
        </div>

    </div>
</div>
*/

.nrelate {
    border: 1px solid #ccc;
    margin: 30px 10px;
    padding: 16px 10px;
    overflow: hidden;
}

.nrelate .nr_content,
.nrelate .nr_partners {
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
}

.nrelate .nr_content {
    float: left;
}

.nrelate .nr_partners {
    float: left;
}

.nrelate ul {
    margin-bottom: 6px;
    padding-left: 0 !important;
}

.nrelate li,
.nr_about {
    font-size: 11px;
    line-height: 18px;
}

.nrelate li:before {
    content: "•";
    color: #666;
    margin-right: 0.5em;
}

.nr_partners li:before {
    margin-right: 0.2em;
}

.nr_source {
    margin-left: 0.5em;
    color: #999;
}

.nrelate .nr_title {
    margin-bottom: 6px;
}

.nr_about {
    display: block;
    margin-left: 10px;
    color: #999;
    text-align: left;
}

.nr_about:hover {
    text-decoration: underline;
}

.nr_about:first-letter {
    text-transform: uppercase;
}

/**
 * Special cases
 */

.r-track.a-overview .nrelate,
.r-album.a-overview .nrelate {
    margin: 18px 0;
}

.r-artist.a-tracks .nrelate {
    margin: 0;
}

.leftColWrapper .nrelate,
.skyWrap .nrelate,
.nrelate-video-list .nrelate,
.nrelate-tag-artist-list .nrelate,
.nrelate-userstore-images .nrelate,
.a-charts .nrelate,
.r-artist.a-albums .nrelate,
.a-similar .nrelate,
#results .nrelate {
    margin: 0 0 18px 0;
}

.a-similar .memo + .ad {
    margin-top: 18px;
}

.a-neighbours .messageBox + .ad {
    margin-top: 42px;
}

.a-wiki .nrelate,
.a-tracks .nrelate,
.a-listeners .nrelate,
.a-neighbours .nrelate,
#festivals .nrelate {
    margin: 18px 0 0;
}

#community-landing .nrelate {
    margin: 0;
}

#music-landing .nrelate,
.a-freeDownloads .nrelate {
    font-size: 11px !important;

    /* Position above bottom border of last list entry
       to avoid a horrible double border */
    margin: -1px 0 0;
    z-index: 1;
    position: relative;
}

.a-listeners .nrelate,
.r-user.a-neighbours .nrelate,
.r-user.a-tracks .nrelate,
.r-page.a-overview .nrelate {
    clear: both;
}

.r-page.a-overview .nrelate h3 {
    border: none;
}

.threadview .nrelate {
    margin: 0 0 30px 0;
}

.reply .nrelate {
    margin: 30px 0 0 0;
}

.r-user.a-journal .nrelate {
    margin: 16px 0 -16px 0;
}

.r-artist.a-tags .nrelate,
.r-artist.a-events .nrelate,
.r-user.a-events .nrelate,
.nrelate-download .nrelate,
.a-overview .leftColWrapper .nrelate {
    margin: 16px 0;
}

.r-user.a-recs .nrelate {
    margin: 16px 0 4px 0;
}

#library .nrelate {
    margin: 16px 0 0;
}

#library .nrelate-library-grid .nrelate {
    margin: 0 0 16px;
}

.r-user.a-library .nrelate {
    margin: 16px 0;
}

#anonhome .nrelate {
    margin: 24px 0;
    background-color: #E3E3E3;
}


/* artist specific */

a.ontour {
    color: #fff;
    background: #D51007;
    font-size: 9px;
    line-height: 1em;
    font-weight: normal;
    white-space: nowrap;
    text-transform: uppercase;
    border: 3px solid #D51007;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 0.25em;
}

a.ontour:hover {
    text-decoration: none;
    background-color: #999;
    border-color: #999;
}

/*
    .page-head has four states
    with-crumbtrail with-image       - Full state, with images and crumbtrail
    without-crumbtrail with-image    - No crumbtrail, but image
    with-crumbtrail without-image    - Header, crumbtrail and nav
    without-crumbtrail without-image - Simplest state, header and nav
*/

.page-head {
padding: 18px 0;
background: #fff;
position: relative;
}

.fiflufi .page-head,
.fixed .page-head,
.sic .page-head.separated {
padding-left: 15px;
padding-right: 15px;
}

.l-970 .page-head {
margin-top: -18px;
}

.page-head.separated {
padding-bottom: 18px;
margin-bottom: 15px;
border-bottom: 1px dotted #ccc;
}

.sic .page-head.separated {
margin-left: -15px;
margin-right: -15px;
}

.page-head h1 {
font-size: 20px;
line-height: 30px;
}

.fullWidth > h1:first-child {
margin-top: 15px;
}

.page-head .crumb-wrapper {
line-height: 36px;
}

.page-head .crumb-image {
height: 60px;
width: 60px;
border-radius: 2px;
}

.page-head .top-crumb {
font-size: 13px;
line-height: 18px;
font-weight: normal;
width: 50%;
}

.page-head .crumb-wrapper h1 {
border-top: 1px solid #ccc;
padding-top: 6px;
margin-top: 5px;
}

.page-head .crumb-arrow {
text-indent: -99999px;
display: inline-block;
width: 10px;
height: 14px;
margin: 0 3px 0 5px;
background: url('http://cdn.lst.fm/flatness/headingwithnav/1/crumb-arrow.png') 50% 50% no-repeat;
line-height: 0.65;
}

.secondary-nav {
text-align: right;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.secondary-nav.more-visible .visible-menu {
padding-right: 1em;
}

.secondary-nav .more {
display: none;
}

.secondary-nav.more-visible .more {
display: block;
}

.secondary-nav ul {
overflow: hidden;
height: 18px;
margin-bottom: 0;
}

.secondary-nav li {
display: inline;
margin-left: 1em;
white-space: nowrap;
}

.secondary-nav .drop-down-menu {
position: absolute;
top: 0;
right: 0;
}

.secondary-nav .hidden-menu {
overflow: visible;
background: #fff;
position: absolute;
text-align: left;
min-width: 150px;
height: auto;
border: 1px solid #ccc;
z-index: 10000;
right: -10px;
box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
display: none;
margin-top: 5px;
}

.active .hidden-menu {
display: block;
}

.secondary-nav .hidden-menu li {
display: block;
margin: 0
}

.secondary-nav .hidden-menu li a {
display: block;
padding: 0 10px;
line-height: 30px;
}

.secondary-nav .hidden-menu li a:hover,
.secondary-nav .hidden-menu li a:focus {
background: #eeeeee;
text-decoration: none;
}

.secondary-nav .current a,
.secondary-nav .current a:hover {
color: #000;
font-weight: bold;
}

.secondary-nav .active .menu-toggle {
background: #fff;
border: 1px solid #ccc;
padding: 4px 9px 7px;
border-bottom: none;
z-index: 10001;
position: relative;
left: 10px;
border-radius: 3px 3px 0 0;
}

/* Now for the complicated part: The state specific overrides */

/* Without crumbtrail, elements should be table-cells and vertically aligned
   to accommodate multi-line titles */

.page-head.without-crumbtrail {
display: table;
}

.page-head.without-crumbtrail h1 {
width: 50%;
}

.page-head.without-crumbtrail.with-image h1 {
padding-left: 20px;
}

.page-head.without-crumbtrail h1,
.page-head.without-crumbtrail.with-image .crumb-image,
.page-head.without-crumbtrail .secondary-nav {
display: table-cell;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.page-head.without-crumbtrail .secondary-nav {
left: 3px; /* line-up table-cell with abs positioned version */
}

.fiflufi .page-head.without-crumbtrail .drop-down-menu {
right: 15px;
}


.page-head.without-crumbtrail .drop-down-menu {
top: 50%;
margin-top: -9px;
}

/* with images and a crumbtrail, the image should be absolutely positioned and the nav alongside the crumb */

.page-head.with-crumbtrail.with-image {
margin-left: 80px;
min-height: 60px;
}

.page-head.with-crumbtrail.with-image .crumb-image {
position: absolute;
left: -80px;
}

.fiflufi .page-head.with-crumbtrail.with-image .crumb-image,
.fixed .page-head.with-crumbtrail.with-image .crumb-image,
.sic .page-head.with-crumbtrail.with-image.separated .crumb-image {
left: -65px;
}

.page-head.with-crumbtrail .secondary-nav {
width: 50%;
position: absolute;
right: 0;
top: 18px;
padding-left: 20px;
}

.fiflufi .page-head.with-crumbtrail .secondary-nav,
.fixed .page-head.with-crumbtrail .secondary-nav,
.sic .page-head.with-crumbtrail.separated .secondary-nav {
right: 15px;
}

.page-head.with-crumbtrail.without-image .secondary-nav {
top: 18px;
}





/* .actions-bar can sit below .page-head */

.actions-bar {
padding-bottom: 15px;
overflow: hidden;
background: #fff;
}

.fiflufi .actions-bar,
.fixed .actions-bar {
padding-left: 15px;
padding-right: 15px;
}














div.pagehead {
    position: relative;
    margin: 15px 0;
    padding: 0 0 0 48px;
    clear: both;
}

div.pagehead .secure {
    margin-left: -48px;
}

.l-970 div.pagehead {
    margin-top :0;
    margin-bottom: 0;
}

div.catalogue.pagehead {
    padding: 0;
}

div.altpagehead {
    padding: 0;
    margin: 15px 0 0 0;
}

/* Only .fixed layouts have margin on fullWidth */
.fixed .fullWidth div.pagehead,
.fixed .leftCol div.pagehead {
    margin-top: 0;
}

div.pagehead .noImage {
    margin-left: -48px;
}

div.pagehead p {
    color: #0187c5;
    font-size: 12px;
}

div.pagehead p span.userImage {
    float: left;
    margin-left: -48px;
}

div.pagehead p span.userImage img {
    float: none;
    margin-left: 0;
}

div.pagehead p img {
    float: left;
    margin-left: -48px;
    padding: 1px;
    border: 1px solid #ccc;
}

div.pagehead h1 {
    color: #000;
    font-size: 18px;
    margin-top: 0.15em;
}

.l-970 div.pagehead h1 {
    font-size: 24px;
    margin-top: 0;
}

div.pagehead h1.withAlbum {
    padding-right: 85px;
}
div.pagehead h1.withAlbum a.featuredAlbum {
    position: absolute;
    top: 0;
    right: 0;
}

div.pagehead h1 a.feed {
    margin-left: 0.25em;
}

div.pagehead h1 a.feed img {
    float: none;
    vertical-align: baseline;
    margin: 0;
}

div.pagehead div.pagination {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    margin-top: -4px;
}

body.r-tag div.pagehead p img {
    border: 0;
}

div.pagehead p.note {
    color: #666;
    font-size: 11px;
}

div.pagehead img {
    margin-bottom: 3px;
    vertical-align: middle;
}

div.pagehead div.brand {
    position: absolute;
    top: -10px;
    right: 200px;
    width: 70px;
}

div.pagehead div.brand a {
    display: block;
}

/* Countries have wider flag images */
div.pagehead.country {
    padding-left: 79px;
}

div.pagehead.country p img {
    margin-left: -79px;
}

div.pagehead .breadcrumb {
    margin-left: 0;
}

.pagehead .feeds {
    margin: 1em 0 0 0;
}

div.eventPagehead {
    padding-left: 35px;
    line-height: 1.3;
}

.eventPagehead .calSheet {
    position: absolute;
    left: 0;
    top: 2px;
}

.eventPagehead .calLink:hover {
    text-decoration: none;
}

.eventPagehead .calLink:hover .linkTitle {
    text-decoration: underline;
}


/* ==========================================================================
   Page head bar
   ========================================================================== */

.page-head-bar {
    font-weight: bold;
    margin: 0;
    overflow: hidden;
    background: #fffcca;
    padding: 12px 15px;
    border-bottom: 1px dotted rgba(0,0,0,0.1);
}

.ie6 .page-head-bar {
    padding: 4px 15px 7px 15px;
    zoom: 1;
}

.page-head-flag {
    float: right;
}

/* Page template variants
   ========================================================================== */

.responsive .page-head-bar {
    margin-bottom: 0;
    margin-left: -19px;
    margin-right: -19px;
    margin-top: -1px;
    border-radius: 2px 2px 0 0;
    padding: 12px 20px;
}

.responsive .page-head-bar p {
    margin-bottom: 0;
}

.fullWidth .page-head-bar,
.fiflufi .leftCol .page-head-bar {
    margin-top: -15px;
}

.sic .page-head-bar {
    margin-left: -15px;
    margin-right: -15px;
}

/* Correction variants
   ========================================================================== */

.page-head-bar--redirected-from,
.page-head-bar--sponsored {
    background: #e4f1ff;
}

/* pagination styles */

.pages {
    display: none;
}

/* ==========================================================================
   Legacy default pagination
   ========================================================================== */

.pagination {
    float: right;
    margin: 0.5em 0;
    font-size: 11px;
    line-height: 2.5;
}

.pagination .selected,
.pagination a {
    text-decoration: none;
    padding: 0.2em 0.5em;
    border: 1px solid #ccc;
    margin: 0 0.2em;
}
.pagination a:hover {
    color: #000;
    border-color: #aaa;
    background: #efefef;
}

.pagination .selected {
    font-weight: bold;
    border: 0;
}
.pagination .ellipsis {
    margin: 0 0.5em;
}

.pagination a:hover span {
    text-decoration: underline;
}

.pagination a.prevlink,
.pagination a.prevlink:hover {
    padding-left: 15px;
    border: 0;
    background: url(http://cdn.lst.fm/depth/global/page_previous.gif) no-repeat left center;
    color: #0187c5;
}

.pagination a.nextlink,
.pagination a.nextlink:hover {
    padding-right: 15px;
    border: 0;
    background: url(http://cdn.lst.fm/depth/global/page_next.gif) no-repeat right center;
    color: #0187c5;
}


/* Responsive pagination
   ========================================================================== */

.responsive .pagination {
    float: none;
    text-align: right;
    font-size: 12px;
    margin: 0;
}

.responsive .pagination .selected {
    border: none;
}

.responsive .pagelink {
    background: #eeeeee;
    padding: 8px 10px;
    border: none;
}

.responsive .pagelink:hover,
.responsive .pagelink:focus {
    background: #dddddd;
}

.responsive .pagelink:active {
    background: #cccccc;
}


#profilerButton {
    display:inline;
    float:left;
    font-size:10px;
    font-weight:bold;
    height:22px;
    line-height:22px;
    margin:0 0 0 26px;
    overflow:hidden;
    color: #D20039;
}
#profilerButton:hover,
#profilerButton:hover div.messageBox strong {
    background-color: #BFDFF4;
}
#profilerButton div.messageBox {
    margin: 0;
}
#profilerButton.blink span {
    visibility: hidden;
}

.profilerSection {
    font-size: 10px;
}
.profilerSection .fixed {
    height: 300px;
    overflow: auto;
}
.profilerSection .code {
    padding: 5px;
    border: 1px solid #ddd;
    background: #eee;
    margin-bottom: 10px;
    overflow: auto;
}


/**
 * The promobar that appears at the top of webpages and shiz
 */
.promobar {
    background-color: #eef5fc;
    border-radius: 0 0 5px 5px;
    border: 1px solid #bfdff4;
    border-top: none;
    font-size: 11px;
    margin: -8px 0 9px 0;
    padding: 0 32px 0 10px;
    position: relative;
}

.responsive .promobar {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.promobar p {
    padding: 10px 0 8px 0;
}

.promobar p img.icon { 
    display: inline;
    top: 4px;
    margin-right: 7px;
    position: relative;
}

/* Chrome does weird things to the alignment without this. */
.promobar p, .promobar a, .promobar strong { 
    vertical-align: bottom;
}

.promobar .newtag {
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 0 1px 3px -1px #999;
    height: 100%;
    padding: 2px 3px 4px 3px;
    float:left;
    margin-right: 8px;
}

.promobar .newtag strong {
    border: 1px solid #eee;
    border-top: none;
    color: #D51007;
    display: block;
    height: 100%;
    padding: 8px;
    text-align: center;
    text-transform: uppercase;
}

/* repetition in class name for use in javascript */
.promobar .promobarDismiss {
    height: 13px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 13px;
    cursor: pointer;
}

.no-js .promobar .promobarDismiss {
    display: none;
}

/* Spotify-specific promobar shiz */ 
.promobar.promobar_spotify .ss-spotify_icon { 
    float: left;
    margin: 0 8px 10px 0;
    top: -1px;
}

.promobar.promobar_spotify .container span {
    white-space: nowrap;
}

/* Style for password reset nagbar */

.promobar_passwordSecurity {
    background-color: #fffcca;
    border-color: #fff200;
}

.promobar_passwordSecurity .dismiss_blue_icon {
    background-position: 0 -1120px;
}


.promo-unit,
a.promo-unit:hover,
a.promo-unit:focus {
    display: block;
    text-decoration: none;
    color: #000;
}

.promo-unit .media {
    margin-bottom: 0px;
}

.promo-unit img {
    border-radius: 2px;
}

.promo-unit-fake-link {
    text-decoration: none;
    color: #0187c5;
}

.promo-unit .media-pull-left:hover + .media-body .promo-unit-fake-link,
.promo-unit .promo-unit-fake-link:hover,
.promo-unit h2:hover {
    text-decoration: underline;
}

.promo-unit h2 {
    margin-top: 0;
    margin-bottom: 18px;
}

.promo-unit p {
    margin-bottom: 0;
}

/* Auto classes */

.promo-unit--add-vertical-margins,
.promo-unit--add-top-margin {
    margin-top: 18px;
}

.promo-unit--add-vertical-margins,
.promo-unit--add-bottom-margin {
    margin-bottom: 18px;
}

/* ==========================================================================
   Recently viewed module
   ========================================================================== */

.recently-viewed {
    position: relative;
    max-width: 942px;
    padding: 0 18px;
    background: white;
    border-radius: 0 0 2px 2px;
    border: 1px solid #ccc;

    /* Attaches to bottom of content area */
    margin: -25px auto 24px;
}

/* Legacy pages with 15px margins, etc. */
#page .recently-viewed {
    margin-top: -1px;
    max-width: 100%;
    padding: 0 15px 15px;
}

.recently-viewed h2 {
    font-size: 13px;
    margin: 18px 0;
    color: #000;
}

.recently-viewed h2 a,
.recently-viewed h2 span {
    color: #999;
    font-weight: normal;
}

.recently-viewed-list {
    margin: 0 -5px;
}

.recently-viewed-item {
    display: block;
    float: left;
    width: 6.6667%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px;
}

.recently-viewed-item img {
    max-width: 100%;
    border-radius: 2px;
}

.recently-viewed .lab-disclaimer-small {
    position: absolute;
    top: 18px;
    right: 20px;
}

div.resource {
    position: relative;
    margin: 0 0 1.5em 0;
    padding: 0.5em;
    background: #f0f0f0;
}
.resource span.actions {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em 0.5em 0.5em 0.5em;
    background: #f6f6f6;
    font-size: 11px;
}
.resource:hover span.actions {
    visibility: visible;
}
.resource span.actions a {
    color: #000;
}
.resource span.actions a:hover {
    color: #0187c5;
}
.resource span.actions img {
    margin: 1px 4px 0 0;
    float: left;
}

body div.resource h1 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.428571;
    font-weight: normal;
    background: none;
}
body div.resourceSmall h1 {
    font-size: 12px;
    line-height: 1.5;
}

.resource h1 a img.thumb,
.resource h1 a span.userImage,
.resource h1 a span.albumCover,
.resource h1 a .videoStill {
    float: left;
    margin-bottom: 0.5em;
}

.resource h1 a span.albumCover,
.resource h1 a .videoStill {
    padding: 2px;
}

.resource h1 a span.albumCover {
    background: #fff;
}

.user h1 a img.thumb {
    padding: 1px;
    border: 1px solid #999;
}

.resource h1 a span.albumCover {
    margin-bottom: 1em;
    padding: 0;
}
.resource h1 a span.poster {
    margin: 0 0 1em 0;
}
.resource h1 a span.userImage img.thumb,
.resource h1 a span.albumCover img.thumb,
.resource h1 a span.poster img.thumb,
.resource h1 a .videoStill img.thumb {
    float: none;
    margin: 0;
    padding: 0;
}

.resource h1 a .videoStill .play {
    display: none;
}

.resourceSmall h1 a img.thumb,
.resourceSmall h1 a span.calSheet {
    margin-left: -48px;
}
.resourceSmall h1 a span.albumCover {
    margin-left: -46px;
}
.resourceMedium h1 a img.thumb,
.resourceMedium h1 a span.userImage,
.resourceMedium h1 a span.calSheet {
    margin-left: -83px;
}
.resourceVideoMedium h1 a .videoStill {
    margin-left: -138px;
}
.resourceMedium h1 a span.calSheet {
    width: 50px;
}
.resourceMedium h1 a span.calSheet span.month {
    font-size: 11px;
    height: 18px;
    letter-spacing: 0.1em;
    line-height: 1.5;
}
.resourceMedium h1 a span.calSheet span.day {
    font-size: 24px;
    line-height: 1.5;
}
.resourceMedium h1 a span.albumCover {
    margin-left: -88px;
}
.resourceLarge h1 a img.thumb {
    margin-left: -153px;
}
.resourceLarge h1 a span.albumCover,
.resourceLarge h1 a span.calSheet {
    margin-left: -149px;
}

.resource p,
.resource div {
    margin: 0.2em 0 0 0;
    color: #111;
}

body div.resourceSmall h1,
.resourceSmall p,
.resourceSmall div {
    padding-left: 50px;
}
body div.resourceMedium h1,
.resourceMedium p,
.resourceMedium div {
    padding-left: 85px;
}
body div.resourceVideoMedium h1,
.resourceVideoMedium p,
.resourceVideoMedium div {
    padding-left: 138px;
}
body div.resourceLarge h1,
.resourceLarge p,
.resourceLarge div {
    padding-left: 155px;
}


div.richtext div.full {
    display: none !important;
    visibility: hidden !important;
}


#page .scrobblesource {
    color: #666;
    font-size: 11px;
    line-height: 1.363636;
    padding: 0.5em 0;
}

#page .scrobblesource img.ss_icon {
    vertical-align: baseline;
    margin: 0 3px -3px 0;
}

#page ul.usersSmall .scrobblesource {
    padding: 0;
    line-height: 1;
}

div.scroller {
    overflow: auto;
    position: relative;
    color: #555;
    margin: 20px 0;
    padding: 0; 
}

div.scrollerJS {
    width: auto !important;
}

.ie6 div.scroller {
    width: 100%;
    height: 84px;
    overflow-y: hidden;
}

.ie7 div.scroller {
    width: 100%;
    height: 84px;
    overflow-y: hidden;
}

div.scroller a.scrollLeft,
div.scroller a.scrollRight {
    display: block;
    height: 64px;
    width: 10px;
    position: absolute;
    top: 2px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    background-position: 0 0;
}

div.scroller a.scrollLeft,
div.scroller a.scrollLeft:hover {
    left: 0;
    background-image: url("http://cdn.lst.fm/flatness/scroller/left.png");
}

div.scroller a.scrollRight,
div.scroller a.scrollRight:hover {
    right: 0;
    background-image: url("http://cdn.lst.fm/flatness/scroller/right.png");
}

div.scroller a.scrollLeft:hover,
div.scroller a.scrollRight:hover {
    background-position: 0 -64px;
}

div.scroller a.scrollLeft:active,
div.scroller a.scrollRight:active {
    background-position: 0 -128px;
    outline: 0;
}

div.scroller a.scrollLeft.disabled,
div.scroller a.scrollRight.disabled {
    background-position: 0 -192px;
}

div.scroller div.imageTrackContainer {
    clear: both;
    margin: 0 -5px;
}

div.scrollerJS div.imageTrackContainer {
    overflow: hidden;
    position: relative;
    height: 68px;
    margin: 0;
}

div.scroller div.imageTrackContainer ul {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    height: $imageLinkSizepx;
    overflow: hidden;
}

div.scrollerJS div.imageTrackContainer ul {
    position: absolute;
    left: 0;
}

div.scroller div.imageTrackContainer ul li {
    margin: 0 2px;
    padding: 0;
    float: left;
    display: inline;
    width: 68px;
    height: 68px;
}

div.scroller div.imageTrackContainer ul li a {
    border: solid 2px #FFF;
    width: 64px;
    height: 64px;
    display: block;
    overflow: hidden;
}

div.scroller div.imageTrackContainer ul li.selected a,
div.scroller div.imageTrackContainer ul li a:hover {
    border: solid 2px #FFF386;
}

#secondaryNavigation {
    position: absolute;
    left: -111px;
    top: -1px;
    width: 111px;
    z-index: 10;
    font-size: 11px;
    line-height: 2em;
    font-weight: bold;
}

div.sic #secondaryNavigation {
    top: -1px;
}

#secondaryNavigation ul {
    overflow: hidden;
    padding: 1px 0 0 0;
    border-top: 1px solid #ccc;
}

#secondaryNavigation li {
    display: block;
}

#secondaryNavigation li a {
    display: block;
    width: 94px;
    margin: -1px 0 0 0;
    padding: 5px 5px 5px 10px;
    text-decoration: none;
    
    /* Use css3 gradients with a fallback; http://css-tricks.com/css3-gradients/ */
    background-color: #ededed;
    background-repeat: repeat-x;
    background-image: url(http://cdn.lst.fm/flatness/secondary_nav_bg.png);
    background-image: -moz-linear-gradient(top, #fff, #eee 70%);
    background-image: -webkit-linear-gradient(top, #fff, #eee 70%);
    
    border: 1px solid #ccc;
    color: #666;
}
#secondaryNavigation li.first a {
    border-top: 0;
}

/* Used on /findfriends */
#secondaryNavigation li a img {
    display: block;
}

#secondaryNavigation li.current {
    box-shadow: rgba(0,0,0,0.1) 0 5px 10px -4px;
    position: relative;
}

#secondaryNavigation li a:hover,
#secondaryNavigation li.current a {
    color: #D51007;
    background: #fff;
}
#secondaryNavigation li.current a {
    border-right-color: #fff;
}

#secondaryNavigation .multiLine {
   line-height: 1.3em;
   margin: 3px 0;
   display: block;
}

.selectachain {
    overflow: hidden;
}

.ie6 {
    height: 1%;
}

.selectachain li {
    float: left;
}

.selectachain li.selectachain-option {
    padding-right: 25px;
    background: url('http://cdn.lst.fm/flatness/buttons/9/flex-arrows.png') 100% -100px no-repeat;
}

.selectachain li.selectachain-option:last-child,
.selectachain li.selectachain-last {
    background: none;
}

.selectachain li a,
.selectachain li strong {
    padding: 3px 0 2px 0;
    display: block;    
}

.selectachain li a:hover,
.selectachain li a:focus {
    outline: none;
    text-decoration: underline;
}

.selectachain li .selectachain-field {
    display: none;
}
.selectachain li.selectachain-option .selectachain-field {
    display: block;
}

.selectachain li.selectachain-option .selectachain-open-link {
    display: none;
}

.selectachain li.selectachain-option a,
.selectachain li.selectachain-option strong {
    padding: 2px 8px 1px 8px;
    border: 1px solid;

    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
            border-radius: 3px;           
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;    

    font-weight: normal;
}

.selectachain li.selectachain-option a {
    border-color: #d1d0d0 #b5b5b5 #989898 #b5b5b5;

    background-color: #f8f8f8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fefefe)); 
    background-image: -webkit-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:    -moz-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:     -ms-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:      -o-linear-gradient(top, #f2f2f2, #fefefe); 
    background-image:         linear-gradient(top, #f2f2f2, #fefefe);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f2f2f2', EndColorStr='#fefefe');    

    color: #111;
}

.selectachain li.selectachain-option strong {
    border-color: #00a8d1;

    background-color: #009cc7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00a7d0), to(#008fbe)); 
    background-image: -webkit-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:    -moz-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:     -ms-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:      -o-linear-gradient(top, #00a7d0, #008fbe); 
    background-image:         linear-gradient(top, #00a7d0, #008fbe);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00a7d0', EndColorStr='#008fbe');        

    color: #fff;
}

.selectachain-hidedropdown datalist {
    display: none;
}

.selectachain select,
.selectachain .customSelect-wrap {
    float: left;
}

.selectachain datalist {
    float: left;
}

.selectachain-or {
    float: left;
    padding: 2px 8px 1px 10px
}






/* The old share buttons have had a class of .s-resource added, and the new ones s-default */
/* When the old ones are scrapped, the s-resource styles should be removed, and s-default styles should be merged into the base styles */

#sharebar {
    margin: 1em 0;
    line-height: 1.6em;
}

#sharebar.s-default {
    line-height: 1.5;
}


#sharebuttons {
    font-size: 0;
}


#sharebuttons li {
    display: inline-block;
    height: 21px;
    margin: 0 12px 5px 0;
    position: relative;
}

#sharebar.s-default #sharebuttons li {
    margin: 0 8px 8px 0;
    height: auto;
    font-size: 12px;
    text-align: left;
}

#sharebar.s-default #sharebuttons {
    margin-right: -8px;
}

#sharebar.s-default .lfmFlexButton span,
#sharebar.s-default .lfmFlexButton strong {
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 2px;
}


.ie6 #sharebuttons li,
.ie7 #sharebuttons li {
    display: inline;
    /*
        Set correct stacking context for in IE.
        Display FB iframes above any other elements within catalogueHead, mainly playLinks
    */
    z-index: 5;
}

#sharebar.s-resource .twt-share {
    min-width: 55px;
    font-size: 10px;
    text-align: center;
}

#sharebar.s-resource .twt-share a {
    background: #E6F0F6;
    background-image: -webkit-linear-gradient(#FFF, #D5E6EF);
    background-image: -moz-linear-gradient(#FFF,#D5E6EF);
    color: #186467;
    text-shadow: #fff 0 -1px 0;
    border: 1px solid #9DB9CB;
    display: inline-block;
    min-width: 53px;
    height: 18px;
    border-radius: 3px;
}

#sharebar.s-resource .twt-share a:hover,
#sharebar.s-resource .twt-share a:focus {
    border-color: #68A0C4;
}

#sharebar.s-default .twt-share span {
    padding-left: 29px;
}
#sharebar.s-default .twt-share img {
    position: absolute;
    top: 6px;
    left: 6px;
}


#sharebuttons {
    margin-top: 5px;
}

#sharebar.s-resource #sharebuttons .fbk-share {
    max-width: 190px;
}

#sharebar.s-default .fbk-share span {
    padding-left: 24px;
}
#sharebar.s-default .fbk-share img {
    position: absolute;
    top: 6px;
    left: 6px;
}

#sharebar.s-default .google-plus1 span {
    padding-left: 24px;
}
#sharebar.s-default .google-plus1 img {
    position: absolute;
    top: 6px;
    left: 6px;
}

#sharebar.s-default .lfm-share span {
    padding-left: 29px;
}
#sharebar.s-default .lfm-share img {
    position: absolute;
    top: 4px;
    left: 6px;
}

#sharebuttons iframe {
    border: none;
    overflow: hidden;
    height: 21px;
}

#sharebar #sharebuttons .lfmSendButton {
    height: 20px;
    background: url(http://cdn.lst.fm/flatness/sharebar/send.png) no-repeat right top;
    color: #707070;
    text-shadow: #fff 0 1px 0;
    display: inline-block;
    padding-right: 3px;
}

#sharebar #sharebuttons .lfmSendButton strong {
    padding: 3px 5px 3px 25px;
    background: url(http://cdn.lst.fm/flatness/sharebar/send.png) no-repeat left top;
    display: inline-block;
    line-height: 14px;
    height: 14px;
    font-size: 11px;
}

#sharebar #sharebuttons .lfmSendButton:hover {
    background-position: right -20px;
    color: #555;
}

#sharebar #sharebuttons .lfmSendButton:hover strong {
    background-position: left -20px;
}

/* shoutboxInput */
div#shoutbox {
    font-size: 11px;
    line-height: 1.181818;
}

div.shoutboxInput form {
    padding: 0 0 0 80px;
    clear: both;
    position: relative;
    min-height: 72px;
}

.ie6 div.shoutboxInput form {
    height: 72px;
}

div.shoutboxInput form span.avatar {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 68px;
    height: 68px;
}

/* otherwise the little subscriber dot is at the wrong position */
div.shoutboxInput form span.avatar span.userImage {
    display: block;
}

div.shoutboxInput form textarea {
    display: block;
    width: 99%;
    height: 60px;
}

.ie6 div.shoutboxInput form textarea,
.ie7 div.shoutboxInput form textarea {
    width: 98%;
}

div.shoutboxInput div.textareaActions {
    margin: 5px 0 0 0;
    color: #666;
}

div.shoutboxInput div.textareaActions input#sbPost {
    float: right;
}

.overCharLimit #sbCharCount,
#sbCharCount.overCharLimit  {
    color: red;
}

div.shoutboxInput div.overCharLimit #sbPost {
    color: #888;
}

/* shoutboxList */
.shouts {
    margin: 15px 0;
    width: 100%;
}

.ie6 .shouts {
    width: auto;
}

.shouts .message {
    clear: both;
    position: relative;
    margin: 0 0 12px 0;
    padding: 0 0 6px 80px;
}

.shouts h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 18px;
}

.shouts h3 a,
.shouts h3 a:hover {
    color: #0187c5;
}

.lfmBlack #page #shoutList h3 a {
    color: #0187c5 !important; /* Paint it black strikes again */
}

/* break long links */
.shouts .message a {
    word-wrap: break-word;
}

.shouts .message .author span.userImage {
    display: inline;
    float: left;
    position: relative;
    margin-left: -80px;
}

.shouts .message p {
    padding: 0;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    word-wrap: break-word;
}

.shouts .can-delete p {
    padding-right: 20px;
}

.shouts .meta {
    margin: 6px 0 0;
    font-size: 11px;
    color: #999;
}

.shouts .meta a {
    color: #999;
}

.shoutbox-reply {
    display: none;
}

.user-shoutbox .shoutbox-reply {
    display: inline;
}

.shouts .date {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 16px;
}

.shouts .can-delete .date {
    right: 18px;
}

.shouts .meta form {
    display: none;
    position: absolute;
    top: 1px;
    right: 0;
    margin: 0;
    display: block;
    opacity: 0.5;
}

.shouts .meta form:hover {
    opacity: 1;
}

.deferred.loading-indicator {
    background: url('http://cdn.lst.fm/flatness/spinner_big.gif') no-repeat center 50px;
    min-height: 100px;
}

.responsive .deferred.loading-indicator {
    background: url('http://cdn.lst.fm/flatness/spinner_big_000000_on_eeeeee.gif') no-repeat center 50px;
}

.widget-shoutbox {
    min-height: 175px; /* Add min height so nearby facebook send dialog is not clipped */
}




/* responsive */

.stationbutton.iconright--question:after {
    opacity: 1;
}

/* inline */

#page .stationbuttonInline {
    color: #1b1b1b;
    font-size: 11px;
    line-height: 1.181818;
    white-space: nowrap;
}
#page .stationbuttonImage {
    white-space: normal;
}

#page .stationbuttonInline:hover {
    color: #1b1b1b;
}

#page .stationbuttonInline span {
    vertical-align: middle;
}

#page .stationbuttonInline img.radio_play_icon {
    margin-right: 5px;
    vertical-align: middle;
}

.stationbuttonInline img.radio_small_icon {
    margin: 0 4px 0 0;
    position: relative;
    top: 2px;
}

/* medium */

.stationbuttonMedium {
    clear: both;
    display: block;
    position: relative;
    height: 25px;
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/8/stationbutton-medium.png) left top no-repeat;
    margin: 0 10px 10px 0;
    padding-left: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    line-height: 25px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

#page .stationbuttonMedium:hover,
#page .stationbuttonMedium:hover span.stationButtonWrapper {
    color: #fff;
    text-decoration: underline;
}

.stationbuttonMedium span.stationButtonWrapper {
    position: relative;
    display: block;
    padding: 0 10px 0 2px;
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/8/stationbutton-medium.png) right top no-repeat;
    height: 25px;
}

#page .stationbuttonMedium:hover {
    background-position: left -25px;
}

#page .stationbuttonMedium:hover span.stationButtonWrapper {
    background-position: right -25px;
}

.stationbuttonMediumRight {
    clear: none;	
    float: right;
    margin: 0 0 10px 10px;
    max-width: auto;
}
.ie6 #page .stationbuttonMediumRight {
    width: auto;
}
.ie6 #page .stationbuttonMedium span.stationButtonWrapper {
    width: 0;
}

.ie7 #page .stationbuttonMediumRight {
    overflow: visible;
}

/* Large */

.stationbuttonLarge {
    clear: both;
    display: block;
    position: relative;
    height: 50px;
    line-height: 1.181818em;
    font-size: 11px;
    padding-left: 37px;
    cursor: pointer;
    overflow: hidden;
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/7/stationbutton-large.png) left top no-repeat;
    color: #fff;
}

.stationbuttonLarge:hover {
    background-position: left -50px;
}

.stationbuttonLarge:hover span.stationButtonWrapper {
    background-position: right -50px;
}

.stationbuttonLarge span.stationButtonWrapper {
    position: relative;
    display: block;
    padding: 8px 0 8px 2px;
    margin: 0 0 3px 0;
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/8/stationbutton-large.png) right top no-repeat;
    height: 52px;
    color: #ccc;
}

.stationbuttonLarge span.stationButtonWrapper strong {
    color: #fff;
    font-size: 12px;
    line-height: 1.166667em;
}

.stationbuttonLarge span.stationButtonWrapper p {
    margin: 4px 0 0 0;
    white-space: nowrap;
}


.stationbuttonLarge:hover {
    text-decoration: none;
}

.stationbuttonLarge:hover span.stationButtonWrapper strong {
    color: #fff;
    text-decoration: underline;
}

/* Custom icons (station starter) */
.stationbuttonCustomicons {
    display: block;
    text-align: center;
    text-decoration: none !important;
}

.stationbuttonCustomicons li {
    margin-bottom: 3px;
}

.stationbuttonCustomicons p {
    margin-bottom: 0px !important;
}

.stationbuttonCustomicons:hover .enabled {
    cursor: pointer;
}

.stationbuttonCustomicons strong {
    padding: 0 2px;
}
.stationbuttonCustomicons:hover .enabled strong {
    text-decoration: underline !important;
}

.stationbuttonCustomicons .stationButtonWrapper * {
    opacity: 0.4;
	filter: alpha(opacity=40);
    zoom: 1;
}

.stationbuttonCustomicons .enabled * {
    opacity: 1;
	filter: alpha(opacity=100);
}

.stationbuttonCustomicons img {
    display: block;
    margin: 0 auto 2px auto;
    background-image: url(http://cdn.lst.fm/flatness/listen_v2/userstationicons3.png);
}

.stationbuttonCustomicons img.personal { background-position: 0 0 }
.stationbuttonCustomicons img.mix { background-position: -58px 0 }
.stationbuttonCustomicons img.recommended { background-position: -116px 0 }

.stationbuttonCustomicons:hover .enabled img.personal { background-position: 0 -47px }
.stationbuttonCustomicons:hover .enabled img.mix { background-position: -58px -47px }
.stationbuttonCustomicons:hover .enabled img.recommended { background-position: -116px -47px }

#page .stationbuttonRight .stationbutton,
#page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: right;
}

html:not([lang*=""]) #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
}

.ie6 #page .stationbuttonRight {
    text-align: right;
}

.ie6 #page .stationbuttonRight .stationbutton,
.ie6 #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
    display: inline-block;
}

.ie7 #page .stationbuttonRight {
    text-align: right;
}

.ie7 #page .stationbuttonRight .stationbutton,
.ie7 #page .stationbuttonRight .stationbutton .stationButtonWrapper {
    float: none;
    display: inline-block;
}

/* More stations toggle */

p.toggleStations {
    margin: 10px 0 5px 5px;
    font-size: 10px;
}
#toggleStations,
#toggleStations:hover {
    color: #666;
    text-decoration: none;
}
#toggleStations:hover span {
    text-decoration: underline;
}

.stationbuttonExtended { 
    background-color: #eef5fc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 100%
    min-width: 200px;
    max-width: 320px;
    padding-right: 10px;
}

.stationbuttonExtended .action {
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/2/stationbutton-extended.png) left top no-repeat;
    color: #eee;
    display: block;
    font-size: 14px;
    height: 50px;
    text-align: right;
    padding-left: 40px;
}

.stationbuttonExtended a .layout {
    background: url(http://cdn.lst.fm/flatness/buttons/stationbutton/2/stationbutton-extended.png) right top no-repeat;
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: left;
    position: relative;
    right: -10px;
}

.ie6 .stationbuttonExtended a .layout {
    height: 33px;
    padding-top: 17px;
}

.stationbuttonExtended > a:hover, 
.stationbuttonExtended > a:active {
    background-position: left -50px;
    color: white;
    text-decoration: none;
}

.stationbuttonExtended > a:hover .layout, 
.stationbuttonExtended > a:active .layout {
    background-position: right -50px;
}

.stationbuttonExtended .stationButtonMetadata {
    margin-right: -10px;
    padding: 10px;
}

.stationButtonMetadata a {
    background: none;
}

.stationbutton a.subscription {
    background-position: left -100px;
}

.stationbuttonExtended a.subscription .layout {
    background-position: right -100px;
}

.stationbuttonExtended .label {
    display: table-cell;
    height: 50px;
    font-size: 12px;
    line-height: 1.2;
    padding-right: 10px;
    vertical-align: middle;
}

.stationbutton a.subscription:hover, 
.stationbutton a.subscription:active {
    background-position: left -150px;
}

.stationbuttonExtended a.subscription:hover .layout, 
.stationbuttonExtended a.subscription:active .layout {
    background-position: right -150px;
}

.ie7 .stationbutton .label {
    line-height: 34px;
}

.ie7 .stationbutton .subscription .label {
    line-height: 1.2;
}

.ie7 .stationbutton a.subscription {
    padding-left: 0;
}

.ie7 .stationbutton .layout {
    padding-top: 8px;
    padding-bottom: 8px;
    height: 34px;
    font-size: 14px;
}


a.tag {
    display: block;
    float: left;
    height: 19px;
    padding: 0 2px 0 0;
    background: url(http://cdn.lst.fm/flatness/icons/tag/1/globaltag_right.png) no-repeat right top;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

a.tag:hover {
    text-decoration: none;
    background-position: right bottom;
    color: #fff;
}

a.tag span {
    display: block;
    float: left;
    height: 15px;
    padding: 1px 7px 3px 19px;
    background: url(http://cdn.lst.fm/flatness/icons/tag/1/globaltag_left.png) no-repeat left top;
    line-height: 15px;
    vertical-align: top;
    white-space: nowrap;
}

a.tag:hover span {
    background-position: left bottom;
}

/* Tag browser for /music landing pages */

div.tagBrowser {
    display: block;
    overflow: auto;
    position: relative;
}

ul.tagList {
    width: 111px;
    float: left;
    display: inline;
    overflow: hidden;
}

ul.tagList li {
    display: block;
    float: left;
    clear: left;
    width: 76px;
    margin: 0 15px 0 0;
    padding: 3px 10px;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    font-weight: bold;
}

ul.tagList li a {
    display: block;
    font-weight: normal;
}


div.tagBrowser div.wrapper {
    width: 522px;
    float: left;
    display: inline;
    overflow: hidden;
    position: relative;
    zoom: 1;
}

.tagHead {
    display: block;
    overflow: auto;
    background: #cdcccc url(http://cdn.lst.fm/flatness/shaders/60-vert-f2f2f2-cdcccc.gif) repeat-x;
    color: #000;
    padding: 7px 13px;
    border-bottom: 1px solid #b3b3b3;
}

.tagHead .tagpage {
    font-size: 11px;
    float: right;
    font-weight: bold;
}

.tagHead .tagpage .tag_icon {
    margin: 0 4px -2px 0;
}

.tagHead h2 {
    color: #000;
    font-size: 16px;
    line-height: 1.25em;
}

.tagHead h2 .tag_icon {
    margin: 0 5px 3px 0;
}

.tagHead .similarTags {
    margin: 2px 0 0 0;
    font-size: 11px;
    line-height: 1.181818em;
    color: #999;
}

.tagHead .similarTags strong {
    font-weight: normal;
    color: #000;
}

/* ==========================================================================
   Personal tag styling
   ========================================================================== */

.personal-tag-item {
    width: 30px;
}

.personal-tag-icon {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
}

.personal-tags {
    margin-top: -12px;
}

.tasteometer {
    font-size: 11px;
    line-height: 1.181818em;
}

/* extends .tasteometer  */
.festivalTasteometer {
    font-size: 12px;
    margin: 0 0 1.5em;
}

/* extends .tasteometer  */
.friendRequestsTasteometer {
    width: 400px;
    margin-left: 43px;
}

.eventListTasteometer {
    margin-top: 5px;
}

.tasteometer .bar {
    display: block;
    position: relative;
    margin: 5px 0;
    height: 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #ccc;
}

/* extends .tasteometer  */
.festivalTasteometer .bar {
    width: 426px;   
}

.tasteometer .reading {
    text-transform: uppercase;
}

.tasteometer .bar span {
    display: block;
    height: 8px;
    border-radius: 3px;
}

.tasteometer .verylow span {
    background: #9a9a9a;
}

.tasteometer .low span {
    background: #453e45;
}

.tasteometer .medium span {
    background: #5336bd;
}

.tasteometer .high span {
    background: #05bd4c;
}

.tasteometer .veryhigh span {
    background: #e9c102;
}

.tasteometer .super span {
    background: #ff0101;
}

.festivalTasteometer .memo div {
    display: inline;
    float: left;
    width: 50%;
}

.festivalTasteometer .memo {
    margin: 1em 0;
}

.festivalTasteometer .memo h3,
.festivalTasteometer .memo p {
    padding-right: 1em;
}

/* User tasteometer  */
/* extends .tasteometers  */

.userTasteometer .moduleOptions {
    background: transparent;
}

.userTasteometer form {
    margin: 9px 0 0 0;
}

.userTasteometer textarea {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    width: 100%;
}

.userTasteometer p.textarea {
    margin: 0 8px 0 0;
}

.userTasteometer p.input {
    margin: 10px 0 0 0;
    text-align: right;
}

/* .horizontalOptions - used in charts/search/... toggle */

.horizontalOptions {
    display: block;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #ccc;
    font-size: 10px;
    line-height: normal;
}

.horizontalOptions ul {
    overflow: hidden;
    margin-bottom: -1px;
}

.loading .horizontalOptions ul {
    background: url(http://cdn.lst.fm/flatness/spinner_small.gif) 99% top no-repeat;
}

/* Stop spinner appearing over feeds link on chart pages */
.a-charts .loading .horizontalOptions ul {
	background-position: 93.6% top;
}

.horizontalOptions ul li {
    float: left;
    margin: 0 5px 0 0;
    list-style: none;
}

.horizontalOptions ul li a,
.horizontalOptions ul li span,
.horizontalOptions ul li strong {
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 0 3px 0 0;
    padding: 0 2px 0 5px;
}
.horizontalOptions ul li a {
    color: #0187c5;
    text-decoration: none;
}
.horizontalOptions ul li a span,
.horizontalOptions ul li a strong {
    float: none;
    margin: 0;
    padding: 0;
}

.horizontalOptions ul li.current {
    border: 1px solid #ccc;
    border-bottom-color: #fff;
    
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.horizontalOptions ul li.current a {
    color: #666;
    text-decoration: none;
}

.ie6 .horizontalOptions ul li.current,
.ie7 .horizontalOptions ul li.current {
    background: url(http://cdn.lst.fm/flatness/navigation/1/tab_mini_right.png) no-repeat right top;
    border: none;
}

.ie6 .horizontalOptions ul li.current a,
.ie7 .horizontalOptions ul li.current a {
    background: url(http://cdn.lst.fm/flatness/navigation/1/tab_mini_left.png) no-repeat left top;
}

.horizontalOptions ul li a:hover {
    text-decoration: underline;
}

.horizontalOptions ul li.current a:hover {
    text-decoration: none;
}

/* tertiary nav based on library tabs - lets call it medium */

.horizontalOptions ul.medium {
    font-size: 12px;
    display: block;
    text-align: center;
    line-height: 26px;
    overflow: hidden;
    zoom: 1;
}

.horizontalOptions ul.medium li {
    height: 26px;
    float: left;
    background: url(http://cdn.lst.fm/flatness/components/tertiaryNavigation/medium_tab_right_inactive.png) no-repeat right top;
    border: none;
}

.horizontalOptions ul.medium a {
    float: left;
    padding: 5px 10px 5px 10px;
    height: 26px;
    background: url(http://cdn.lst.fm/flatness/components/tertiaryNavigation/medium_tab_left_inactive.png) no-repeat left top;
}

.horizontalOptions ul.medium li.current {
    background: url(http://cdn.lst.fm/flatness/components/tertiaryNavigation/medium_tab_right.png) no-repeat right top;
    height: 27px;
    margin-bottom: -1px;
}

.horizontalOptions ul.medium .current a {
    background: url(http://cdn.lst.fm/flatness/components/tertiaryNavigation/medium_tab_left.png) no-repeat left top;
    height: 27px;
    color: #0187c5;
}

.horizontalOptions ul.medium img {
    vertical-align: middle;
    margin-left: -3px;
    margin-top: -3px;
}

.ie7 .horizontalOptions ul.medium img {
    vertical-align: middle;
}

/* new tertiary nav */

div.tertiaryNavigation {
    display: block;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #666;
    font-size: 11px;
    line-height: normal;
}

div.tertiaryNavigation ul li {
    float: left;
    position: relative;
    margin: 0 6px -1px 0;
}

div.tertiaryNavigation ul li.last {
    margin-right: 0px;
}

div.tertiaryNavigation ul li a,
div.tertiaryNavigation ul li span,
div.tertiaryNavigation ul li strong {
    float: left;
    height: 23px;
    line-height: 23px;
}
div.tertiaryNavigation ul li a {
    margin: 0 3px 0 0;
    padding: 0 4px 0 7px;
    color: #0187c5;
    text-decoration: none;
}
div.tertiaryNavigation ul li a span,
div.tertiaryNavigation ul li a strong {
    float: none;
}

div.tertiaryNavigation ul li {
    background: url(http://cdn.lst.fm/flatness/navigation/tab_right.png) no-repeat right top;
}

div.tertiaryNavigation ul li a {
    background: url(http://cdn.lst.fm/flatness/navigation/tab_left.png) no-repeat left top;
}

div.tertiaryNavigation ul li.current {
    background: url(http://cdn.lst.fm/flatness/navigation/tab_active_right.png) no-repeat right top;
}

div.tertiaryNavigation ul li.current a {
    background: url(http://cdn.lst.fm/flatness/navigation/tab_active_left.png) no-repeat left top;
    color: #000;
    text-decoration: none;
}
div.tertiaryNavigation ul li.plain {
    background: none;
}

div.tertiaryNavigation ul li a:hover {
    text-decoration: underline;
}

div.tertiaryNavigation ul li.current a:hover {
    text-decoration: none;
}

div.tertiaryNavigation ul li.last,
div.tertiaryNavigation ul li:last-child {
    border: 0;
}

/* old tertiary nav */
ul.tertiaryNavigation {
    clear: both;
    margin: 1em 0;
    padding: 0;
    background: #eee;
    overflow: hidden;
}

ul.tertiaryNavigation li {
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.tertiaryNavigation a {
    display: block;
    padding: 0.25em 1em;
}

ul.tertiaryNavigation a:hover {
    background: #ddd;
}

ul.tertiaryNavigation li.current a {
    background: #999;
    font-weight: bold;
    color: #fff;
}


.trackscrobblegraph {}

.trackscrobblegraph h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.125em;
    margin: 0;
    color: #9a9a9a;
}                  

.trackscrobblegraph p {
    font-size: 11px;
    line-height: 1.181818em;
    margin: 0 0 1em 0;
    color: #9a9a9a;
}


div.twidget {
    
}

div.twidget ul {
    margin: 0 0 .5em;
}

div.twidget li {
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #FFFFFF;
    padding: 6px 0;
}

div.twidget li a {
    color: #666;
}

div.twidget li span a {
    color: #0187c5;
}

/* Input element */

.typeahead {
    overflow: auto;
    max-height: 9.8em;
    margin: 0.5em 0 0 0;
    border: 1px solid #bbb;
    padding: 0;
    line-height: 1.4em;
    background: #fff;
    color: #000;
    cursor: text;
}
.typeaheadFocus {
    outline: 5px auto -webkit-focus-ring-color;
    -moz-outline: 2px solid #7eadd9;
    -moz-outline-radius: 3px;
    outline-offset: -2px;
}

#page .typeahead input.typeaheadCaret {
    display: block;
    float: left;
    border: 0;
    outline: 0;
    margin: 2px 0 1px 3px;
    padding: 3px 0 4px 0;
    line-height: normal;
}
#page .typeahead input.typeaheadHidden {
    width: 0 !important;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    border-width: 5px 0;
    color: #fff;
    background: #fff;
}

.typeahead a.typeaheadSelected {
    display: block;
    float: left;
    position: relative;
    margin: 3px 0 1px 3px;
    padding: 2px 19px 2px 3px;
    background: #ddd;
    color: #333;
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    line-height: normal;
}
.typeahead a:hover {
    background: #ccc;
}
.typeahead a.typeaheadActive {
    background: #0060e9;
    color: #fff;
}
.typeahead span.typeaheadRemove {
    position: absolute;
    right: 3px;
    top: 3px;
    display: block;
    width: 13px;
    height: 13px;
    background: url(http://cdn.lst.fm/flatness/buttons/delete.2.png) no-repeat left top;
    cursor: pointer;
    font-size: 0;
    text-indent: -1000em;
}
.typeahead span.typeaheadRemove:hover {
    cursor: pointer;
}

/* Results */

#page ul.typeaheadResults {
    position: absolute;
    margin: 0;
    padding: 0;
    border-top: 0;
    list-style: none;
}
#page ul.fixedTypeahead {
    position: fixed;
}
#page ul.typeaheadResults ul,
#page ul.typeaheadResults li {
    display: block;
    margin: 0;
    padding: 0;
}
#page ul.typeaheadResults ul {
    overflow: auto;
    max-height: 300px;
    padding: 4px 0 0 0;
    border: 1px solid #ddd;
    border-top: 0;
    background: #fff;
    color: #000;
}
ul.typeaheadResults li.paginatedResults p {
    font-size: 20px;
    text-align: right;
}
ul.typeaheadResults li.paginatedResults p span {
    margin-left: 0.5em;
}
#page ul.typeaheadResults li.paginatedResults li {
    margin: 0 4px 4px 4px;
}
ul.typeaheadResults li.paginatedResults ul a {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: #000;
}
ul.typeaheadResults li.paginatedResults ul a:hover {
    background: #5297FF;
    color: #fff;
}
ul.typeaheadResults ul li.highlight a {
    background: #0060e9;
    color: #fff;
}

ul.typeaheadResults li.paginatedResults span {
    text-decoration: underline;
    font-weight: bold;
}

p.typeaheadSuggestions {
    margin: 13px 0 0 0;
    color: #666;
    font-size: 11px;
}
p.typeaheadSuggestions span {
    color: #1b1b1b;
}
p.typeaheadSuggestions a {
    margin: 0 3px;
}

div.typeaheadHint {
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-top: 0;
    background: #f5f5f5;
    color: #999;
    list-style-type: none;
    font-size: 11px;
}

.user-listen-counts li {
    margin: 0 0 24px 70px;
    position: relative;
    min-height: 60px;
}

.user-listen-counts .userImage {
    position: absolute;
    left: -70px;
    top: 0;
}

/* Ideally would add a class to the user image to differentiate from icon */
.user-listen-counts .userImage img:first-child {
    width: 60px;
    height: 60px;
}

.user-listen-counts li .chartbar {
    margin-left: -10px;
    margin-top: 6px;
}

.user-listen-counts li .chartbar span {
    padding-left: 20px;
}

.user-listen-count-name {
    padding-left: 10px;
}

.userListenCounts {
margin-top: 1em;
}

.userListenCounts li {
position: relative;
min-height: 38px;
padding: 0.5em 0 0.5em 43px;
}

.userListenCountsAjax li {
font-size: 12px;
line-height: 1.5em;
}

.userListenCounts li .chartbar {
margin-left: -5px;
line-height: 16px;
}

.userListenCounts li.you .chartbar span {
background: #48779a;
}

.userListenCounts span.userImage {
position: absolute;
left: 0;
top: 8px;
}



.videos-on-dark .video-list-link,
.videos-on-dark .video-list-link:hover,
.videos-on-dark .video-list-link:focus {
    color: #fff;
}

.video-list-link img,
.video-list-link .play-video {
    width: 140px;
    height: 79px;
    max-width: 100%;
}

.video-list-link .play-video {
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url(http://cdn.lst.fm/flatness/responsive/play_32.png);
}

.video-list-link:focus .play-video,
.video-list-link:hover .play-video {
    background-color: rgba(0,0,0,0.4);
}

/* WeekPicker */

.weekpicker {
}

.weekpicker-dateSelect {
}

.weekpicker label,
.weekpicker select,
.weekpicker .customSelect-wrap,
.weekpicker .submit {
    float: left;
}

.weekpicker label {
    margin-right: 0.6em;
    margin-top: 3px;
}

.weekpicker select,
.weekpicker .customSelect-wrap {
    font-weight: bold;
}

.weekpicker .customSelect-wrap {
    margin-right: 0.8em;
}

.weekpicker .submit {
    margin-left: 0.3em;
}

.ie #weekpicker-years {
    width: 7em;
}

/* previous/next buttons */

.weekpicker-prevnext {
    float: right;
    margin-top: 3px;
}

.weekpicker-prev, .weekpicker-next {
    display: inline;
    color: #999;
}

.weekpicker-next {
    border-left: 1px solid #999;
    padding-left: 0.85em;
    margin-left: 0.5em;
}

div.wiki {
    margin: 1em 0;
}

.wikiParagraphs p {
    margin-bottom: 1em;
}

#wikiAbstract {
    margin: 10px 0;
    line-height: 1.5em;
}

.wiki-options {
    margin-top: 12px;
}

.wiki-options a {
    margin-right: 1em;
}


#page span.lineupPoster {
    display: block;
    position: relative;
    background: #1b1b1b;
    color: #fff;
}
#page span.lineupPoster span {
    clear: both;
    display: block;
    padding: 5px;
    font-size: 9px;
    line-height: 1.333333;
    background: #1b1b1b;
}
#page span.lineupPostermega span {
    font-size: 11px;
    line-height: 1.181818;
}
#page span.lineupPoster img {
    float: left;
    margin: 0
}
#page span.lineupPoster span.foot {
    text-align: right;
}

.promoInfoBox {
    margin: 0 0 10px 0;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #fff;
    text-align: center;
    line-height: 1.3;
}

.promoInfoBox h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
}

.promoInfoBox p {
    color: #666;
}

.promoInfoBox a.promoButton {
    display: -moz-inline-box;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    line-height: 0;
    background: #1b1b1b;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    height: 20px;
    text-decoration: none;
    color: #fff;
    font-size:11px;
    font-weight:bold;
    padding: 0;
    margin: 10px 0 10px 0;
    vertical-align: middle;
}

.promoInfoBox a.promoButton:hover {
    background: #0187c5;
}


.promoInfoBox a.promoButton span {
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    display: -moz-inline-box;
    display: inline-block;
    letter-spacing: 0;
    line-height: 11px;
    height: 20px;
    padding: 4px 0 0 8px;
    margin: 0 8px 0 0;
    border: none;
    vertical-align: text-top;
    zoom: 1;
}

#page .vodafoneInfoBox2008_11 a img {
    margin: 3px auto;
    display: block;
}

#page .barbicanInfoBox2008_10 {
    padding-top: 25px;
    background: #e6e6e6 url(http://cdn.lst.fm/flatness/promo/barbican/barbicanInfoBox2008_10-bg.png) 20px 0 no-repeat;
}

.motoInfoBox {
    margin: 15px 0 10px 0;
    padding: 5px;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: #e6e6e6 url(http://cdn.lst.fm/flatness/promo/motorokr/motorola_infobox-logo.gif) right bottom no-repeat;
    border-color: #e6e6e6;
    text-align: center;
    line-height: 1.3;
}
.motoInfoBox h3 {
    margin: 0 0 5px 0;
    font-size: 12px;
}
.motoInfoBox p {
    color: #666;
}
.motoInfoBox a.motoButton {
    display: -moz-inline-box;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 0;
    line-height: 0;
    background-position: right top;
    background-repeat: no-repeat;
    height: 25px;
    text-decoration: none;
    color: #fff;
    font-size:11px;
    font-weight:bold;
    text-transform:uppercase;
    padding: 0;
    margin: 10px 0 10px 0;
    vertical-align: middle;
    padding-top: -2px;
    background-image: url(http://cdn.lst.fm/flatness/promo/motorokr/motorola_infobox-btn.gif);
}
.motoInfoBox a.motoButton span {
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    display: -moz-inline-box;
    display: inline-block;
    line-height: 1;
    letter-spacing: 0;
    background-image: url(http://cdn.lst.fm/flatness/promo/motorokr/motorola_infobox-btn.gif);
    background-position: left top;
    background-repeat: no-repeat;
    height: 25px;
    padding: 6px 0 0 8px;
    margin: 0 8px 0 0;
    border: none;
    vertical-align: text-top;
    zoom: 1;
}





ul.albums .lfmDropDown {
    margin: 3px 3px 3px 0;
}

/* albumsLarge */

.albumsLarge {
    line-height: 1.25;
    clear: both;
    position: relative;
}

ul.albumsLarge li {
    display: inline;
    float: left;
    width: 49.5%;
    margin-bottom: 30px;
    position: relative;
}

ul.albumsLarge li.odd {
    clear: both;
}

.resContainer {
    padding: 0 15px 0 155px;
}

.resContainer span.albumCover {
    display: inline;
    float: left;
    margin: 0 0 0 -155px;
}

.resContainer {
    min-height: 135px;
}

.albumsMedium .resContainer,
.albumsSmall .resContainer {
    min-height: 70px;
}

.ie7 .resContainer span.albumCover {
    margin: 0;
    float: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.albumsLarge .resContainer a.artist {
    font-size: 11px;
}

.albumsLarge .resContainer a {
    color: #1b1b1b;
    text-decoration: none;
}

.albumsLarge .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsLarge .resContainer .lfmSmallButton,
.albumsLarge .resContainer .lfmSmallButton:hover {
    color: #fff;
}

.albums .resContainer .buyButtonSupplier a {
    color: #0187c5;
}

.albumsLarge .resContainer p.stats {
    margin: 3px 0 0 0;
    color: #666;
    font-size: 10px;
}

.albumsLarge .resContainer div.buttons {
    margin: 1.5em 0 0 0;
}

.albumsLarge .resContainer p.label {
    margin: 5px 0 0 0;
    font-size: 10px;
    color: #666;
}

.albumsLarge .resContainer p.label a {
    color: #666;
}

.albumsLarge .resContainer p.label a:hover {
    color: #0187c5;
}

.albumsLarge a.playbutton {
    position: absolute;
    left: 115px;
    top: 105px;
}


/* albumsMedium */

.albumsMedium {
    position: relative;
    line-height: 1.25em;
}

ul.albumsMedium li {
    display: inline;
    float: left;
    position: relative;
    width: 49.5%;
    margin-bottom: 15px;
}

ul.albumsMedium li.odd {
    clear: both;
}

.albumsMedium .resContainer {
    padding: 0 15px 0 85px;
}

.albumsMedium .resContainer span.albumCover {
    float: left;
    display: inline;
    margin: 0 0 0 -85px;
}

.ie7 .albumsMedium .resContainer span.albumCover {
    margin: 0;
}

.albumsMedium .resContainer a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
}

.albumsMedium .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsMedium .resContainer a.artist {
    font-size: 11px;
}

.albumsMedium a.playbutton {
    position: absolute;
    left: 54px;
    top: 47px;
}

/* albumsSmall */

.albumsSmall {
    position: relative;
    line-height: 1.25em;
}

ul.albumsSmall li {
    display: inline;
    float: left;
    position: relative;
    width: 24.5%;
    margin-bottom: 15px;
}

ul.albumsSmall li.odd {
    clear: both;
}

.albumsSmall .resContainer {
    padding: 0 15px 0 85px;
}

.albumsSmall .resContainer span.albumCover {
    float: left;
    display: inline;
    margin: 0 0 0 -85px;
}

.ie7 .albumsSmall .resContainer span.albumCover {
    margin: 0;
}

.albumsSmall .resContainer a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
}

.albumsSmall .resContainer a:hover {
    color: #0187c5;
    text-decoration: underline;
}

.albumsSmall .resContainer a.artist {
    font-size: 11px;
}

.albumsSmall a.playbutton {
    position: absolute;
    left: 54px;
    top: 47px;
}

p.newRelease {
    position: absolute;
    top: 137px;
    left: 0px;
    text-align: right;
    width: 140px;
    display: inline;
}

.albumsMedium p.newRelease {
    top: 70px;
    width: 72px;
}


p.newRelease span {
    padding: 0 2px;
    line-height: 1.3;
    font-weight: bold;
    font-size: 90%;
    border-top:1px solid #FFF2A6;
    background: #FEF081; 
    color: #1b1b1b;
}

/* Large */

ul.artistsLarge {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.181818em;
    margin-right: -15px;
}

ul.artistsLarge li {
    position: relative;
    float: left;
    display: inline;
    width: 132px;
    height: 155px;
    margin: 0 9px 0 0;
    overflow: hidden;
}

.pictureFrame {
    position: relative;
    display: block;
    width: 132px;
    height: 109px;
    overflow: hidden;
    cursor: pointer;
}

.pictureFrame .image {
    position: absolute;
    top: 2px;
    left: 3px;
    display: block;
    width: 126px;
    height: 100px;
    overflow: hidden;
}

.pictureFrame .image img.defaultImage {
    margin: -12px 0 0 0;
}

.pictureFrame .overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 132px;
    height: 109px;
    background: url(http://cdn.lst.fm/flatness/picture_frame.png) left top transparent;
}


.ie6 .pictureFrame .overlay {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/picture_frame.png', sizingMethod='crop');
    cursor: pointer;
}

ul.artistsLarge span.track a {
    color: #666;
}

ul.artistsLarge a {
    color: #000;
}

ul.artistsLarge a.plays {
    color: #0187c5;
    font-size: 10px;
    white-space: nowrap;
}

ul.artistsLarge a:hover {
    color: #0187c5;
}

ul.artistsLarge li a strong.withAdd {
    display: block;
    margin: 1px 0 0 3px;
    text-indent: 20px;
    line-height: 1.454545;
}
ul.artistsLarge a.playbutton {
    position: absolute;
    left: 105px;
    top: 81px;
}
ul.artistsLarge a.addbutton {
    position: absolute;
    left: 3px;
    top: 111px;
    width: 15px;
    height: 15px;
    background: url('http://cdn.lst.fm/flatness/global/icon_add_hover.gif') no-repeat 0 0;
}
ul.artistsLarge a:hover img.add_icon {
    display: none;
}

.visible ul.artistsLarge .loading span.image {
    background: url(http://cdn.lst.fm/flatness/spinner_big.gif) center no-repeat #fff;
}

ul.artistsLarge form {
    display: none;
}

ul.artistsLarge li p.info {
    color: #666;
}

/* square */

ul.artistsSquare {
    margin: 0 0 7px 0;
}
ul.artistsSquare li {
    float: left;
    display: inline;
    width: 188px;
    margin: 6px 0 0 0;
    font-size: 11px;
    line-height: 1.181818;
}

ul.artistsSquare a {
    display: block;
    padding: 1px 0 0 45px;
    color: #0187c5;
}

ul.artistsSquare a img {
    padding: 1px;
    background: #fff;
    border: 1px solid #ccc;
}

ul.artistsSquare a.highlight img {
    border-color: #0187c5;
}

ul.artistsSquare strong {
    color: #000;
}
ul.artistsSquare a:hover strong {
    color: #0187c5;
}
ul.artistsSquare img {
    display: inline;
    float: left;
    margin: -1px 0 0 -45px;
}

/* medium */

ul.artistsMedium {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.181818em;
    margin-right: -15px;
}

ul.artistsMedium li {
    position: relative;
    float: left;
    display: inline;
    width: 72px;
    height: 86px;
    margin: 0 9px 5px 0;
    overflow: hidden;
}

ul.artistsMedium a li {
    clear: both;
    display: block;
}

/* IE6/7 only - need to adjust the link placement to avoid text cropping */
.ie6 ul.artistsMedium a,
.ie7 ul.artistsMedium a { 
    position: relative;
    top: -3px;
}

/* medium, but then vertical (we should get rid of the default medium style alltogether...) */

ul.artistsMediumVertical li {
    clear: both;
    padding: 0 0 13px 78px;
}

ul.artistsMediumVertical li a.artist {
    color: #1b1b1b;
}

ul.artistsMediumVertical li a strong {
    display: block;
}

ul.artistsMediumVertical li a img {
    display: inline;
    float: left;
    margin: 0 0 0 -77px;
    padding: 1px;
    background: #fff;
    outline: 1px solid #ccc;
}

/* small */

ul.artistsSmall {
    margin: 1em 0;
}

ul.artistsSmall li {
    margin: 0 0 1em 0;
    padding: 0 0 0 79px;
    overflow: hidden;
}

ul.artistsSmall a {
    text-decoration: none;
}

ul.artistsSmall h4 {
    margin-left: -15px;
    border-top: solid 1px #ddd;
    padding-left: 15px;
    background: #eee;
}

ul.artistsSmall img {
    float: left;
    display: inline;
    margin: -1px 0 0 -79px;
}

ul.artistsSmall li strong {
    display: block;
    font-weight: bold;
}

ul.artistsSmall li div a {
    margin-right: 5px;
    padding-left: 14px;
    text-decoration: none;
}

ul.artistsSmall li div.media {
    margin-top: 5px;
}

ul.artistsSmall li div.media a.videos {
    background: url(http://cdn.lst.fm/flatness/video_small.gif) 0 2px no-repeat;
}

ul.artistsSmall li div.media a.tracks {
    background: url(http://cdn.lst.fm/flatness/track_small.gif) 0 2px no-repeat;
}

ul.artistsSmall li div.media a strong {
    display: none;
}

ul.artistsSmall li div.media a span {
    padding: 0 5px;
    background: #ddd;
    color: #333;
    font-size: 10px;
}

/* not really a list, but hey... */

p.artists {
    padding: 1em 0 0 0;
    clear: both;
    font-size: 11px;
    line-height: 1.181818;
}

p.artists a {
    color: #0187c5;
    text-decoration: none;
}

p.artists a.highlight {
    background: #0187c5;
    color: #fff;
}

/* artistsWithInfo */
ul.artistsWithInfo {
    clear: both;
}

ul.artistsWithInfo li {
    clear: both;
    display: block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #ccc;
    zoom: 1;
}

ul.artistsWithInfo li.last {
    border-bottom: none;
}

ul.artistsWithInfo li .pictureFrame {
    float: left;
    display: inline;
}

ul.artistsWithInfo li .playbutton {
    position: absolute;
}

ul.artistsWithInfo li a.artist,
ul.artistsWithInfo li a.track {
    color: #1b1b1b;
}

ul.artistsWithInfo li p.stats {
    color: #666;
}

ul.artistsWithInfo li p.bio {
    margin: 1em 0;
}

/* artistsWithInfo large specific */

ul.artistsWithInfo li.large {
    padding-left: 145px;
}

ul.artistsWithInfo li.large .pictureFrame {
    margin-left: -145px;
}

ul.artistsWithInfo li.large .playbutton {
    left: 105px;
    top: 80px;
}

.ie6 #page .artistsWithInfo li.large .playbutton {
    margin-left: -145px;
}

ul.artistsWithInfo li.large a.artist strong {
    font-size: 16px;
    line-height: 1.181818em; 
}

ul.artistsWithInfo li.large p.stats {
    font-size: 11px;
}

/* artistsWithInfo medium specific */

ul.artistsWithInfo li.medium {
    padding-left: 80px;
}

ul.artistsWithInfo li.medium .pictureFrame {
    margin-left: -80px;
}

ul.artistsWithInfo li.medium .playbutton {
    position: static;
}

ul.artistsWithInfo li.medium p.stats {
    font-size: 11px;
}

/* Similarity match */

ul.artistsWithInfo div.matchmeter {
    float: right;
    display: block;
    right: 0px;
    top: 0px;
    width: 180px;
    background: #efefef;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsWithInfo div.matchmeter strong {
    text-transform: uppercase;
}

ul.artistsWithInfo div.matchmeter span.bar {
    clear: both;
    display: block;
    width: 100%;
    height: 5px;
    margin: 3px 0 0 0;
    background: #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
ul.artistsWithInfo div.matchmeter span.bar span {
    display: block;
    height: 5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

ul.artistsWithInfo div.matchmeter span.pc90 span {
    background: #ff0101;
}

ul.artistsWithInfo div.matchmeter span.pc70 span {
    background: #e9c102;
}

ul.artistsWithInfo div.matchmeter span.pc50 span {
    background: #05bd4c;
}

ul.artistsWithInfo div.matchmeter span.pc30 span {
    background: #453e45;
}

ul.artistsWithInfo div.matchmeter span.pc10 span {
    background: #9a9a9a;
}

/* Medium with featured */

ul.artistsMediumWithFeatured {
    padding-left: 267px;
}

ul.artistsMediumWithFeatured li {
    border-top: 1px solid #ccc;
}

ul.artistsMediumWithFeatured li .container {
    display: block;
    padding: 5px;
    padding-right: 73px;
    border-top: 1px solid #fff;
    font-size: 11px;
    line-height: 1.181818em;
    min-height: 64px;
}

ul.artistsMediumWithFeatured li img.artistImage {
    display: inline;
    float: right;
    margin-right: -73px;
}

ul.artistsMediumWithFeatured li strong.artist {
    display: block;
    font-size: 12px;
    line-height: 1.166667em;
    color: #1b1b1b;
}

ul.artistsMediumWithFeatured li a:hover {
    text-decoration: none;
}

ul.artistsMediumWithFeatured li a:hover strong.artist {
    color: #0187c5;
}

ul.artistsMediumWithFeatured li p.info {
    font-size: 11px;
    line-height: 1.181818em;
    color: #1b1b1b;
}
    

ul.artistsMediumWithFeatured li span.info {
    display: block;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsMediumWithFeatured li p.info {
    margin-top: 5px;
}

ul.artistsMediumWithFeatured li.first {
    display: inline;
    float: left;
    margin-left: -267px;
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

ul.artistsMediumWithFeatured li.first a {
    display: block;
    position: relative;
    width: 252px;
    height: 189px;
    background-color: #000; /* CSS Defensiveness */
    background-repeat: no-repeat;
    background-position: center top;
}

ul.artistsMediumWithFeatured li.first p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 252px;
    color: #fff;
    font-size: 11px;
    line-height: 1.272727em;
}

ul.artistsMediumWithFeatured li.first p.info * {
    padding: 3px 9px;
    display: inline;
    float: left;
    background: #000;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}
        

ul.artistsMediumWithFeatured li.first p.info strong {
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
    padding: 3px 9px;
}

ul.artistsMediumWithFeatured li.first p.info .extra {
    clear: left;
    padding-bottom: 5px;
}


ul.artistsMediumWithFeatured li.first a:hover p.info strong {
    color: #0187c5;
}


/* Mega with featured */

ul.artistsMegaWithFeatured {
    clear: both;
    display: block;
    border: 1px solid #ccc;
}

ul.artistsMegaWithFeatured li {
    display: block;
    float: left;
}

ul.artistsMegaWithFeatured li a {
    position: relative;
    display: block;
    width: 195px;
    height: 134px;
    border: 1px solid #fff;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: center center;
}

ul.artistsMegaWithFeatured li.first a {
    width: 352px;
    height: 270px;
}

ul.artistsMegaWithFeatured li a:hover {
    text-decoration: none;
}

ul.artistsMegaWithFeatured li p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    color: #fff;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.artistsMegaWithFeatured li p.info * {
    padding: 3px 9px;
    display: inline;
    clear: left;
    float: left;
    background: #000;
    /* white-space: nowrap; */
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}

ul.artistsMegaWithFeatured li p.info strong {
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
    padding: 3px 9px;
}

ul.artistsMegaWithFeatured li a:hover p.info strong {
    color: #0187c5;
}

/* Pictureframe */

.pictureFrameMediumsquare {
    position: relative;
    display: block;
    width: 72px;
    height: 59px;
    overflow: hidden;
    cursor: pointer;
}

.pictureFrameMediumsquare .image {
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: 64px;
    height: 52px;
    overflow: hidden;
}

.pictureFrameMediumsquare img.defaultImage {
    margin: -8px 0 0 0;
}

.pictureFrameMediumsquare .overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 72px;
    height: 59px;
    background: transparent url(http://cdn.lst.fm/flatness/picture_frame_medium.2.png) left top no-repeat;
}


.ie6 .pictureFrameMediumsquare .overlay {
    background: transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.lst.fm/flatness/picture_frame_medium.2.png', sizingMethod='crop');
    cursor: pointer;
}

/* */
.pictureFrameSmallsquare {
    position: relative;
    display: block;
    width: 36px;
    height: 28px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
}

.pictureFrameSmallsquare .image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 34px;
    height: 26px;
    overflow: hidden;
    border: 1px solid #fff;
}

.pictureFrameSmallsquare .image img.defaultImage {
    margin: -4px 0 0 0;
}

.pictureFrameSmallsquare .overlay {
    display: none;
}
/* Wrappers */

#page div.artistsLargeOneRowWrapper {
    position: relative;
    clear: both;
    height: 155px;
    overflow: hidden;
}

#page div.artistsLargeTwoRowsWrapper {
    position: relative;
    clear: both;
    height: 310px;
    overflow: hidden;
}

/* Artist Recs */

ul.artistRecs {
    padding-bottom: 10px;
}

ul.artistRecs li {
    display: block;
    float: left;
    width: 265px;
    padding-bottom: 10px;
    font-size: 11px;
    line-height: 1.272727em;
    color: #666;
}

ul.artistRecs li.odd {
    clear: both;
}

ul.artistRecs li div.container {
    padding-left: 78px;
    padding-right: 9px;
    position: relative;
}

ul.artistRecs li .pictureFrame {
    display: inline;
    float: left;
    margin-left: -78px;
}

ul.artistRecs li a.artist {
    color: #1b1b1b;
}

ul.artistRecs li a.artist:hover {
    color: #0187c5;
    text-decoration: underline;
}

ul.artistRecs li a strong.name {
    font-size: 12px;
}

ul.artistRecs li a.playbutton {
    position: absolute;
    left: 45px;
    top: 34px;
}

.ie6 ul.artistRecs li a.playbutton {
    display: inline;
    float: left;
    margin-left: -81px;
}

ul.artistRecs li p.info {
    margin-top: 0.363636em;
}


/* small-vertical */

.list-artist-small-vertical li {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    width: 100%;
    padding: 5px 0;
}

.list-artist-small-vertical li.first {
    border-top: 0;
}

.list-artist-small-vertical li.last {
    border-bottom: 0;
}

.list-artist-small-vertical .list-content {
    padding: 0 0 0 48px;
}

.list-artist-small-vertical .pictureFrame {
    float: left;
    display: inline;
    margin-left: -48px;
}

.list-artist-small-vertical .summary {
    font-size: 11px;
    line-height: 1.181818em;
    font-weight: bold;
}

.mediumChartWithImages li {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    height: 84px;
}

.mediumChartWithImages li a {
    display: block;
    height: 64px;
    padding-left: 66px;
}

.mediumChartWithImages li a:hover {
    text-decoration: none;
}

.mediumChartWithImages li a small {
    display: block;
    line-height: 1.181818em;
    color: #666;
    font-size: 11px;
}

.mediumChartWithImages li img.chartImage {
    float: left;
    margin: 0 0 0 -66px;
    border: 1px solid #0187c5;
}

.mediumChartWithImages li a:hover img.chartImage {
    border-color: #0187c5;
}

.mediumChartWithImages li p {
    padding: 3px 5px;
}

.mediumChartWithImages li a:hover p strong {
    text-decoration: underline;
}

.mediumChartWithImages li span.position {
    position: absolute;
    display: block;
    left: 59px;
    top: 0px;
    width: 20px;
    text-align: center;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    background: #73b7e5;
    color: #fff;
    display: none;
}

#page .chartbar2 {
    position: relative;
    display: block;
    width: auto;
    height: 22px;
    line-height: 22px;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

#page .chartbar2 span.bar {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 60px;
    height: 22px;
    line-height: 22px;
    background: url(http://cdn.lst.fm/flatness/charts/chartbar.png) no-repeat right top;
}

#page .chartbar2 span.value {
    display: block;
    position: relative;
    padding: 0 5px;
    z-index: 1;
    font-size: 11px;
    line-height: 22px;
}

.ie6 .chartbar2 span.value {
    margin: 3px 0;
}

#page a .chartbar2 span.value,
#page a:hover .chartbar2 span.value {
    color: #fff;
    text-decoration: none;
}

/* small */

ul.journalsSmall {
    border-bottom: 1px solid #fff;
    font-size: 11px;
}

ul.journalsSmall li {
    padding: 5px 5px 5px 25px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

ul.journalsSmall li.last {
    border-bottom: none;
}

ul.journalsSmall li img.journal_icon {
    float: left;
    display: inline;
    margin: 0 0 0 -25px;
}

ul.journalsSmall li.first {
    border-top: none;
}

ul.journalsSmall a strong {
    color: #1b1b1b;
}

ul.journalsSmall a:hover strong {
    color: #0187c5;
}

ul.journalsSmall li span.info {
    display: block;
    margin: 3px 0 0 0;
    font-size: 10px;
}

ul.journalsSmall li span.info {
    color: #666;
}

/* with excerpt */

ul.journalsExcerpt li {
    padding: 10px 10px 10px 75px;
}

ul.journalsExcerpt li a.excerptImage {
    float: left;
    margin-left: -76px;
    margin-top: 3px;
}

ul.journalsExcerpt li a.title img {
    display: none;
}

/* featured */

ul.journalsFeatured li {
    font-size: 12px;
    border-bottom: none;
}

ul.journalsFeatured li.last {
    border-bottom: none;
}

ul.journalsFeatured li span.info {
    margin-top: 0;
}

ul.journalsFeatured li p.excerpt {
    margin-top: 5px;
}

/* small */


ul.eventsSmall span.calSheet {
    float: left;
    display: inline;
    margin-left: -37px;
}

ul.eventsSmall li {
    zoom: 1;
    padding: 5px 5px 5px 42px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.eventsSmall li.first {
    border-top: 0;
}
ul.eventsSmall li.last {
    border-bottom: 0;
}

ul.eventsSmall a {
    text-decoration: none;
}

ul.eventsSmall li strong.summary {
    display: block;
    font-size: 11px;
    line-height: 1.181818em;
    color: #000;
}
ul.eventsSmall a:hover strong.summary,
ul.eventsSmall a:hover span.summary {
    color: #0187c5;
    text-decoration: underline;
}

ul.eventsSmall li small.location {
    display: block;
    color: #000;
    font-size: 11px;
    margin: 1px 0 4px 0;
}

ul.eventsSmall li p.info {
    font-size: 10px;
    color: #666;
}

ul.eventsSmall a.comments:hover {
    text-decoration: underline;
}

ul.eventsSmall li.past span.calSheet {
	filter: alpha(opacity=60);
 	-moz-opacity: 0.6;
    opacity: 0.6;
}

/* Medium */

ul.eventsMedium {
    font-size: 11px;
    line-height: 1.5em;
}

ul.eventsMedium li {
    margin-bottom: 10px;
}

ul.eventsMedium li div.event {
    padding: 4px;
    border-top: 1px solid #9cf;
    font-size: 11px;
    background: #f2f2f2;
}

ul.eventsMedium li.hasposter div.event {
    padding-left: 79px;
}

ul.eventsMedium li h3 a {
    color: #0187c5;
}

ul.eventsMedium li a {
    text-decoration: none;
}

ul.eventsMedium li a:hover {
    text-decoration: underline;
}

ul.eventsMedium li h3 img {
    display: none;
}

ul.eventsMedium li.hasposter div.event h3 img {
    display: block;
    float: left;
    margin: 0 0 0 -75px;
}

ul.eventsMedium li span.artists a {
    color: #000;
}

ul.eventsMedium li address a {
    color: #666;
}

ul.eventsMedium li div.eventInfo {
    margin: 5px 0 0 0;
    font-size: 10px;
}

ul.eventsMedium li div.eventInfo a.tickets {
    padding: 0 0 0 20px;
    background: url(http://cdn.lst.fm/flatness/ticket.png) no-repeat left 2px;
}


/* Medium with featured */

ul.eventsMediumWithFeatured {
    clear: both;
    padding-left: 267px;
}

ul.eventsMediumWithFeatured li {
    border-top: 1px solid #ccc;
}

ul.eventsMediumWithFeatured li .container {
    padding: 5px;
    padding-right: 34px;
    border-top: 1px solid #fff;
    font-size: 11px;
    line-height: 1.181818em;
}

ul.eventsMediumWithFeatured li .calSheet {
    display: inline;
    float: right;
    margin-right: -32px;
}

ul.eventsMediumWithFeatured li a.summary {
    display: block;
    font-size: 12px;
    line-height: 1.166667em;
    color: #1b1b1b;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li a.summary:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li .location {
    display: block;
}

ul.eventsMediumWithFeatured li p.info {
    margin-top: 5px;
    color: #666;
}

ul.eventsMediumWithFeatured li.first {
    display: inline;
    float: left;
    margin-left: -267px;
    border: 1px solid #ccc;
    padding: 1px;
    background: #fff;
}

ul.eventsMediumWithFeatured li.first a {
    display: block;
    position: relative;
    width: 252px;
    height: 189px;
    background-color: #000; /* CSS Defensiveness */
    background-repeat: no-repeat;
    background-position: center top;
    text-decoration: none;
}

ul.eventsMediumWithFeatured li.first a:hover {
    text-decoration: none;
}

ul.eventsMediumWithFeatured li.first p.info {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 200px;
    padding: 9px 9px 9px 9px;
    padding-left: 43px;
    background: #000;
    color: #fff;
    font-size: 11px;
    line-height: 1.272727em;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter:alpha(opacity=90);
}

ul.eventsMediumWithFeatured li.first p.info span.calSheet {
    display: inline;
    float: left;
    margin-left: -34px;
    line-height: 1.214286em;
}

ul.eventsMediumWithFeatured li.first p.info strong {
    display: block;
    font-size: 14px;
    line-height: 1.142857em;
    font-weight: bold;
}

ul.eventsMediumWithFeatured li.first a:hover p.info strong {
    color: #0187c5;
}

/* overrides */

ul.eventsNoBorder,
ul.eventsNoBorder li {
    border: 0;
}

dl.factboxMedium {
    border: 1px solid #ddd;
    font-size: 11px;
    padding: 0 10px 0 120px;
}

dl.factboxMedium dt{
    position: relative;
    float: left;
    margin: 0 0 0 -110px;
    font-weight: bold;
}

dl.factboxMedium dd {
    width: 100%;
}

dl.factboxMedium dd ul li {
    position: relative;
    padding: 0 0 0 5px;
    margin: 0 0 0 -5px;
}

dl.factboxMedium dd a {
    color: #D51007;
}

dl.factboxMedium dd ul li small {
    position: absolute;
    top: 0;
    right: 5px;
}

dl.factboxMedium dd ul li.odd {
    background: #efefef;
}

ul#eventPhotos li {
    display: inline;
    float: left;
    margin: 0 10px 10px 0;
    width: 59px;
    height: 59px;
    border: 1px solid #ccc;
    padding: 2px;
    background: #fff;
}

ul#eventPhotos li a {
    display: block;
    overflow: hidden;
    width: 59px;
    height: 59px;
}

ul#eventPhotos li.highlight {
    border: 1px solid #0187c5;
    background: #0187c5;
}

p#eventHeadliners {
    clear: both;
}

p#eventHeadliners a.highlight {
    text-decoration: underline;
}

/* just square images */

ul.floatingSquares {
    overflow: hidden;
    margin: 1em -15px 1em 0;
    padding: 0;
}

ul.floatingSquares li {
    float: left;
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 11px;
}

ul.floatingSquares a {
    display: block;
}

ul.floatingSquares li {
    width: 75px;
    height: 75px;
}

/* inline, comma-separated */

ul.inline {
    margin: 0;
    padding: 0;
}

ul.inline li {
    margin: 0;
    padding: 0;
    display: inline;
}

ul.inline li:after {
    content: ", ";
}

ul.inline li.last:after {
    content: "";
}

/* small */

ul.groupsSmall li.last {
    border-bottom: 0;
}

ul.groupsSmall a,
ul.groupsSmall a:hover {
    text-decoration: none;
    display: block;
}

ul.groupsSmall li strong {
    display: block;
    font-size: 11px;
}

ul.groupsSmall li a strong img.groupImage {
    float: left;
    margin-left: -49px;
}

ul.groupsSmall li.first {
    border-top: none;
}

ul.groupsSmall li {
    display: block;
    padding: 5px 5px 5px 49px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
}

ul.groupsSmall li span.info {
    display: block;
    margin: 2px 0 0 0;
    font-size: 10px;
    color: #666;
}

ul.groupsSmall a strong {
    color: #000;
}

ul.groupsSmall a:hover strong {
    color: #0187c5;
}

/* medium */

ul.groupsMedium {
    margin: 1em 0;
}

ul.groupsMedium li {
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    font-size: 11px;
}

ul.groupsMedium li div.groupContainer {
    padding: 0 0 0 79px;
}

ul.groupsMedium li.odd {
    clear: both;
}

ul.groupsMedium li.odd div.groupContainer {
    padding-right: 30px;
}

ul.groupsMedium strong {
    display: block;
    border-bottom: 1px solid #ccc;
}

ul.groupsMedium strong a {
    color: #1b1b1b;
}

ul.groupsMedium strong a:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.groupsMedium strong img.groupImage {
    float: left;
    margin: 0 0 0 -79px;
}

p.members {
    color: #666;
    font-size: 10px;
    line-height: 17px;
}

p.latestActivity {
    line-height: 14px;
}


ul.groupsMedium h4 {
    margin: 0 -189px 0.25em -15px;
    border-top: solid 1px #ddd;
    padding-left: 15px;
    background: #eee;
    font-size: 16px;
    line-height: 1.25em;
}

ul.groupsMedium h4 img {
    float: left;
    display: inline;
    margin: -1px 0 0 -126px;
}

/* groups medium wide - 1 per row */

ul.groupsMediumWide li {
    padding: 10px 5px;
    margin: 0  0 0-5px;
    width: auto;
    float: none;
    clear: both;
}

ul.groupsMediumWide li.odd div.groupContainer {
    padding-right: 0;
}

.newsEntriesSmall {
    color: #666;
}

.newsEntriesSmall li {
    padding: 6px 0;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.newsEntriesSmall li.last {
    border-bottom: none;
}

.newsEntriesSmall li strong {
    display: block;
    margin-bottom: 3px;
}

.newsEntriesSmall .sub {
    font-size: 10px;
}

.newsEntriesSmall .comment_icon {
    margin-bottom: -3px;
}

.newsEntriesSmall .sub a,
.latestNewsEntry .sub a {
    color: #666;
}

.latestNewsEntry {
    overflow: hidden;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #ccc;
}

.latestNewsEntry .entryImage,
.latestNewsEntry .favIcon {
    border: 1px solid #ccc;
    padding: 1px;
    float: left;
    display: inline;
}

.latestNewsEntry .entryImage {
    margin: 0 10px 0 0;
}

.latestNewsEntry .sub {
    color: #666;
    margin-bottom: 0.7em;
    font-size: 10px;
}

.latestNewsEntry h3 {
    margin-bottom: 3px;
}

.latestNewsEntry h3 img {
    margin: 0 0 0 -25px;
}

.latestNewsEntryWithFavIcon h3 {
    padding: 0 0 0 25px;
}

.latestNewsEntryWithFavIcon .sub {
    padding-left: 25px;
}

.latestNewsEntry .entry-content {
    line-height: 1.363636;
}

.latestNewsEntry .rightshouts,
.newsEntriesSmall .rightshouts {
    text-align: right;
    margin: 4px 0 0 0;
    font-size: 10px;
}

.newsEntriesSmall .rightshouts {
    margin-right: 0;
}

ul.notices li {
    overflow: hidden;
    margin: 0 0 15px 0;
    position: relative;
    background: #f5f5f5;
    border-bottom: solid 1px #ddd;
}

ul.notices div.from {
    overflow: hidden;
    padding: 8px 0 5px 0;
    font-size: 11px;
    background: #eee;
    border-bottom: solid 1px #ddd;
    line-height: 1.363636em;
    color: #666;
}

ul.notices li.new {
    border-bottom: solid 1px #c6d7ea;
}

ul.notices li.new div.from {
    background: #e3eef9;
    border-bottom: 1px solid #c6d7ea;
}

ul.notices li.new div.item {
    background: #f1f6fa;
}

ul.notices div.from span.userImage {
    float: left;
    display: inline;
    margin: -3px 10px 0 5px;
}

ul.notices div.from strong {
    color: #000;
}

ul.notices li div.item {
    padding: 5px;
}

ul.notices p.message {
    margin: 5px 0 10px 0;
}

ul.notices p.outcome {
    margin-top: 10px;
    text-align: right;
    color: #666;
    font-size: 11px;
}

ul.notices p.outcome a {
    text-decoration: none;
}

ul.notices p.outcome a:hover {
    text-decoration: underline;
}

ul.notices div.resource {
    margin: 0;
    padding: 0;
    background: transparent;
}

ul.notices div.resource h1,
ul.notices div.resource p {
    padding-left: 83px;
}

ul.notices div.resource h1 * {
    margin-bottom: 0;
}

ul.notices div.resource p.message {
    font-size: 11px;
}

ul.notices form {
    text-align: right;
}

/* misc */

ul.notices a.close {
    position: absolute;
    top: 5px;
    right: 5px;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    color: #ccc;
    line-height: 1em;
    padding: 0 0.25em 0.25em 0.25em;
    -webkit-border-radius: 0.6em;
    -moz-border-radius: 0.6em;
}

ul.notices a.close:hover {
    background: #ccc;
    color: #f5f5f5;
}

ul.notices li.new a.close {
    color: #98c1dd;
}

ul.notices li.new a.close:hover {
    background: #98c1dd;
    color: #fff;
}

/* ==========================================================================
   Pictures on image slider and in galleries
   ========================================================================== */

.pictures {
    padding: 6px 0;
    margin-right: -15px;
    overflow: hidden;
}

.pictures li {
    position: relative;
    float: left;
    display: inline;
    padding: 0 20px 18px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    width: 16.6667%;
}

.pictures .pic {
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 140px;
}

.pictures .pic img {
    min-height: 100%;
    min-width: 100%;
}

/* Image Slide overrides
   ========================================================================== */

.image-slide .pictures {
    padding: 12px 0 12px 15px;
    margin: 0;
    background: #222;
    background: -webkit-linear-gradient(#222,#000);
    background: -moz-linear-gradient(#222,#000);
    background: -o-linear-gradient(#222,#000);
    background: linear-gradient(#222,#000);
    border-bottom: 1px solid #444;
}

.image-slide .pictures li {
    width: 9.09%;
    padding-bottom: 0;
}

.ie7 .image-slide .pictures {
    padding: 6px 0;
    border-top: 1px solid #444;
}

.ie7 .image-slide .pictures li {
    width: 9%;
    padding-right: 0;
}

.image-slide .pictures a {
    height: 50px;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    -ms-transition: opacity 100ms;
    transition: opacity 100ms;
}

.image-slide .pictures li.selected a,
.image-slide .pictures li a:focus,
.image-slide .pictures li a:hover {
    opacity: 1;
}

.ie7 .image-slide .pictures li.selected a,
.ie8 .image-slide .pictures li.selected a,
.ie7 .image-slide .pictures li a:focus,
.ie7 .image-slide .pictures li a:hover,
.ie8 .image-slide .pictures li a:focus,
.ie8 .image-slide .pictures li a:hover {
    filter: alpha(opacity = 100);
}

.image-slide .pic img {
    max-width: 50px;
}

/* Fix ie8 max-width scaling */
.ie8 .image-slide .pic img {
    width: auto;
}

/* Dismiss icon
   ========================================================================== */

.pictures .dismiss_icon:hover + .pic {
    opacity: 0.5;
    box-shadow: rgba(0,0,0,0.3) 0 3px 3px;
}

.pictures .dismiss_icon {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 5px;
    opacity: 0.5;
    z-index: 2;
}

.pictures .dismiss_icon:hover {
    opacity: 1;
}


.inlineTagList li {
    display: inline;
    padding: 0 7px 5px 0;
}

.freeTracks, .topTracks {
    margin: 0 0 5px 0;
}

.freeTracks li, .topTracks li {
    padding: 7px 7px 7px 30px;
    font-size: 11px;
    line-height: 1.181818em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

.withHead .topTracks li { 
    border-top: 1px solid #333;
    color: #fff;
}

.freeTracks li.first, .topTracks li.first {
    border-top: 0;
}

.freeTracks li.last, .topTracks li.last {
    border-bottom: 0;
}

.freeTracks li.odd, .topTracks li.odd {
    background: #f7f7f7;
}

.withHead .topTracks li.odd { 
    background: #070707;
}

.freeTracks li a.playbutton, .topTracks li a.playbutton {
    float: left;
    display: inline;
    margin: 0 0 0 -22px;
}

.freeTracks li a, .topTracks li a {
    color: #000;
}

.withHead .topTracks li a { 
    color: #fff;
}

.freeTracks li .trackDuration, .topTracks li .trackDuration {
    font-size: 10px;
}

.freeTracks .lfmFreeDownloadButton {
    float: right;
    margin: 0 0 0 5px;
}


/* intro */

div.userIntro {
    margin-bottom: 2em;
}

/* square */

ul.usersSquare {
    display: block;
    width: 304px; /* explicitly set width, so it likes the margins below */
}

ul.usersSquare li {
    display: block;
    float: left;
    width: 70px;
    height: 70px;
    margin: 0 6px 6px 0;
}

ul.smallSquare li a,
ul.usersSquare li a {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    text-decoration: none;
    position: relative;
}

ul.smallSquare li a:hover,
ul.usersSquare li a:hover {
    z-index: 2;
}

ul.usersSquare li a span.userImage {
    display: block;
    width: 64px;
    height: 64px;
    background: #fff;
}

ul.smallSquare li a span.name,
ul.usersSquare li a span.name {
    display: block;
    visibility: hidden;
    position: absolute;
    padding: 2px 4px;
    line-height: 1.272727;
    background: #0187c5;
    color: #fff;
    font-size: 10px;
    font-weight: normal;
    white-space: nowrap;
}

ul.smallSquare {
    margin: 1em -4px 1em 0;
}

ul.smallSquare li {
    float: left;
    display: inline;
    width: 38px;
    height: 38px;
    margin: 0 4px 4px 0;
}
ul.smallSquare li.last {
    margin-right: 0;
}

ul.smallSquare li a img {
    display: block;
    width: 34px;
    height: 34px;
    background: #fff;
}

/* small */

ul.usersSmall li {
    float: left;
    display: inline;
    width: 49%;
    margin: 0 0 7px 0;
}

ul.usersSmall li div {
    padding: 0 0 0 48px;
    font-size: 11px;
    line-height: 1.181818em;
    color: #666;
}

ul.usersSmall li.odd {
    clear: both;
}

ul.usersSmall li.odd div {
    margin-right: 10px;
}

ul.usersSmall li strong a {
    color: #1b1b1b;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer; /* explicit for IE */
}

ul.usersSmall li strong a:hover {
    color: #0187c5;
}

ul.usersSmall span.userImage {
    float: left;
    display: inline;
    margin: 0 0 0 -48px;
}

ul.usersSmall .nowlistening,
ul.usersSmall .justlistened {
    color: #390;
}

ul.usersSmall .nowlistening {
    font-weight: bold;
}

ul.usersSmall a .name {
    background: transparent !important;
}

.ie6 .module ul.usersSmall {
    position: relative;
}

.ie6 .module ul.usersSmall li,
.ie6 .module ul.usersSmall div {
    position: relative;
    height: 38px;
}

.ie7 ul.usersSmall div {
    position: relative;
    min-height: 38px;
}

.ie6 .module ul.usersSmall span.userImage {
    float: none;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.ie7 ul.usersSmall span.userImage {
    float: none;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* user img styles */

span.imgMedium {
    border: 1px solid #999;
}

span.imgMedium img {
    border: 2px solid #fff;
}

a.user span.imgMedium {
    border: 1px solid #999;
}

a.subscriber span.imgMedium {
    border: 1px solid #8ab3e7;
}

a.staff span.imgMedium {
    border: 1px solid #ef647a;
}

a.alumni span.imgMedium {
    border: 1px solid #5336bd;
}

a.user:hover span.imgMedium {
    border: 1px solid #666;
}

a.user:hover span.imgMedium,
a.user:hover span.imgMedium img {
    border-color: #666;
}

a.subscriber:hover span.imgMedium,
a.subscriber:hover span.imgMedium img {
    border-color: #4971a9;
}

a.alumni:hover span.imgMedium,
a.alumni:hover span.imgMedium img {
    border-color: #271057;
}

a.staff:hover span.imgMedium,
a.staff:hover span.imgMedium img {
    border-color: #D51007;
}

/* medium */

ul.usersMedium {
    margin: 1em 0;
    font-size: 11px;
    line-height: 1.181818;
}

ul.usersMedium li {
    position: relative;
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    left: 15px;
}

ul.usersMedium li div.userContainer {
    padding: 0 0 0 79px;
    zoom: 1;
}

ul.usersMedium div.userContainer .listeningNow {
    background: url(http://cdn.lst.fm/flatness/global/icon_eq.gif) top right no-repeat;
}

ul.usersMedium li.odd {
    clear: both;
    left: 0;
}

ul.usersMedium li.odd div.userContainer,
ul.usersMedium li.odd a.delete {
    margin-right: 15px;
}

ul.usersMedium div.userContainer strong {
    display: block;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

ul.usersMedium strong a {
    color: #1b1b1b;
    font-size: 12px;
}

ul.usersMedium strong a:hover {
    color: #0187c5;
    text-decoration: none;
}

ul.usersMedium strong span.userImage {
    float: left;
    margin: 0 0 0 -79px;
    cursor: pointer;
}

ul.usersMedium div.userContainer p strong {
    display: inline;
    border: 0;
}

ul.usersMedium p.info {
    padding: 3px 0;
    color: #666;
    font-size: 10px;
}

ul.usersMedium li a.delete {
    position: absolute;
    top: 0px;
    right: 0;
    display: none;
}
ul.usersMedium li a.delete img.icon {
    display: block;
    margin: 0;
}

ul.usersMedium li:hover a.delete {
    display: block;
}

ul.usersMedium li.findfriends div {
    background: #eef5fc;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5em;
}

ul.usersMedium li.findfriends a.icon {
    background: #fff;
    display: block;
    border: 1px solid #ccc;
    padding: 7px 8px 7px 8px;
    margin-right: 10px;
    float: left;
}

ul.usersMedium li.findfriends a.icon:hover {
    border-color: #0187C5;
}

ul.usersMedium li.findfriends a.icon img {
    float: left;
}

ul.usersMedium li.findfriends div h2 {
    color: #1b1b1b;
    font-size: 12px;
}

/* Users medium wide - 1 per row */

ul.usersMediumWide li {
    padding: 10px 5px;
    margin: 0  0 0-5px;
    width: auto;
    float: none;
    clear: both;
}

ul.usersMediumWide li.odd div.userContainer {
    margin-right: 0;
}

/* mini (for eventz n shit) */

ul.usersMini li {
    display: block;
    float: left;
    clear: both;
    margin: 0 0 3px 0;
    padding: 0 0 0 25px;
}

ul.usersMini li strong span.userImage {
    display: inline;
    float: left;
    margin: 0 0 0 -25px;
}

/* Highlighting, extends user lists  */
.highlightFriends li.friend a,
.highlightUser li.you a {
    background-color: #fff59b;
}


/* small */

ul.venuesSmall {
    margin: 1em 0;
}

ul.venuesSmall li {
    overflow: hidden;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

ul.venuesSmall li.first {
    border-top: none;
}

ul.venuesSmall a {
    display: block;
    padding: 5px 5px 5px 79px;
    text-decoration: none;
}

ul.venuesSmall a strong {
    font-weight: bold;
}

ul.venuesSmall a:hover strong {
    text-decoration: underline;
}

ul.venuesSmall a img {
    float: left;
    display: inline;
    margin: 0 0 0 -74px;
    padding: 1px;
    border: 1px solid #ccc;
}

ul.venuesSmall p {
    margin: 5px 0;
    color: #666;
}

/* ==========================================================================
   Video thumbnail list
   ========================================================================== */

.video-list {
    margin: 0 -20px 0 0;
    clear: both;
    overflow: hidden;
    font-size: 11px;
    line-height: 16px;
}

.video-list li {
    display: inline-block;
    margin: 0 20px 18px 0;
    position: relative;
    width: 140px;
}


/* chart base */

table.chart {
    width: 100%;
    font-size: 11px;
    margin-bottom: 10px;
}

table.chart td {
    vertical-align: top;
    line-height: 16px;
    padding: 3px 5px;
}

table.chart thead td {
    color: #666;
    white-space: nowrap;
}

table.chart thead td.positionCell,
table.chart thead td.playbuttonCell {
    width: 1px;
}

table.chart tr.odd td {
    background-color: #ebebeb;
}

table.chart td.positionCell {
    width: 20px;
    color: #666;
    text-align: right;
}

table.chart td.playbuttonCell {
    width: 17px;
    padding-bottom: 0;
    padding-top: 1px;
}

.ie7 table.chart td.playbuttonCell {
    padding-top: 3px;
}

table.chart td.playbuttonCell a.playbutton {
	display: block;
	padding-top: 3px;
}

.ie7 table.chart td.playbuttonCell a.playbutton  {
	padding-top: 1px;
}

table.chart td.playbuttonCell img {
    margin: 0;
}

table.chart td.subjectCell div {
    width: 100%;
    height: 16px;
    overflow: hidden;
}

table.chart td.subjectCell a {
    color: #1b1b1b;
}

table.chart td.subjectCell a:hover {
    color: #0187c5;
}

table.chart td.durationCell,
table.chart td.reachCell {
    width: 20px;
    color: #666;
    text-align: left;
}

table.chart td.downloadbuttonCell {
    width: 31px;
}

table.chart td.lovedCell {
    padding: 3px 5px 0 0;
    width: 11px;
}

table.chart td.multibuttonCell {
    width: 26px;
    padding: 3px 5px 0 3px;
    line-height: 0;
}

table.chart td.chartbarCell {
    width: 33%;
    padding: 0;
}

.ie6 table.chart td.chartbarCell {
    padding: 0 0 2px 0;
}

table.chart tr.odd td.chartbarCell,
table.chart tr:hover td.chartbarCell {
    background-color: transparent;
}

table.chart a.lfmButton {
    position: relative;
    left: -9999px;
}

table.chart tbody tr:hover td,
table.chart tbody tr.open td {
    background: #d0e4f0;
}

table.chart a.lfmFreeDownloadButton,
table.chart tr:hover a.lfmButton,
table.chart tr.open a.lfmButton {
    left: 0;
}

/* the chartbars */

div.chartbar {
    overflow: hidden;
}

div.chartbar span {
    display: block;
    height: 17px;
    padding: 3px 0.5em 0 0.5em;
    background: #71b7e6;
    color: #fff;
    overflow: hidden;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

div.chartbar a span:hover { 
    background: #48779a;
}

div.chartbar a { 
    padding: 0; 
    margin: 0;
    color: #fff;
}

div.chartbar a:hover { 
    text-decoration:none;
    cursor: pointer;
}


/* flp-fdl indicators */

td.subjectCell small {
    font-size: 9px;
    white-space: nowrap;
}

tr.flp small,
tr.fdl small {
    color: #999 !important;
}

tr.fdl small a {
    color: #0187c5 !important;
}

table.chart td .mp3 {
    display: block;
    width: 3em;

    padding: 0px 4px 0px 4px;
    
    color: #fff;    
    background: #0187c5;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

	text-align: center;
    font-size: 9px;
    font-weight: bold;
}

table.chart td .mp3:hover {
    text-decoration: none;
}


/* small */

table.eventsSmall {
    border-bottom: 1px solid #fff;
}

table.eventsSmall .calSheet {
    float: left;
    display: inline;
    margin-left: -37px;
}

table.eventsSmall td {
    padding: 5px 5px 5px 42px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

table.eventsSmall td.first {
    border-top: none;
}

table.eventsSmall td strong.summary {
    display: block;
    color: #0187c5;
    font-size: 11px;
    line-height: 1.25em;
}

table.eventsSmall td a:hover strong.summary {
    text-decoration: underline;
}

table.eventsSmall td small.location {
    display: block;
    color: #000;
    font-size: 11px;
    margin: 1px 0 4px 0;
}

table.eventsSmall td span.info {
    display: block;
    font-size: 10px;
}

table.eventsSmall td span.info {
    color: #666;
}

table.eventsSmall a span.addComment {
    color: #0187c5;
}

/* Events Map */

#eventsMap p.date {
    padding: 0 0 5px 33px;
    border-bottom: 1px solid #ccc;
}
#eventsMap p.date .calSheet {
    float: left;
    margin: -8px 0 0 -33px;
}
#eventsMap p.summary a {
    display: block;
    min-height: 45px;
    padding: 5px 0 10px 45px;
    color: #1b1b1b;
    text-decoration: none;
}
#eventsMap p.summary a strong {
    color: #0187c5;
}
#eventsMap p.summary a:hover strong {
    text-decoration: underline;
}
#eventsMap p.summary a strong img {
    display: inline;
    float: left;
    margin: 0 0 5px -45px;
}

/* Medium */

table.eventsMedium {
    width: 100%;
    margin: 0 0 30px 0;
    font-size: 11px;
    line-height: 1.5em;
}

table.eventsMedium .month th {
    padding: 3em 0 0 0;
    color: #1b1b1b;
    font-size: 18px;
    font-weight: bold;
}

table.eventsMedium .month th.first {
    padding-top: 1em;
}

table.eventsMedium .day th {
    padding: 15px 0 5px 0;
    font-size: 12px;
    font-weight: bold;
}
table.eventsMediumRecent .day th {
    color: #666;
}

table.eventsMedium span.cancelled {
    background: #f21c06;
    color: #fff;
    font-weight: normal;
    margin-right: 5px;
    padding: 2px;
    border-radius: 2px;
    display: inline-block;
    font-size: 11px;
}

.ie7 table.eventsMedium span.cancelled {
    padding: 0 3px;
}

table.eventsMedium tr td {
    padding: 0.6em 1em 1em 0;
    border-top: 1px solid #ccc;
}

table.eventsMedium tr .detail {
    width: 45%;
}
table.eventsMedium tr .detail a {
    display: block;
    min-height: 65px;
    padding-left: 75px;
    padding-right: 10px;
    text-decoration: none;
    color: #666;
}

/* extends eventsMedium  */
table.eventsHome tr .detail {
    width: 50%;
}

table.eventsHome tr .detail a {
    padding-left: 38px;
}

table.eventsMedium .detail a strong {
    color: #0187c5;
    font-size: 12px;
}
table.eventsMedium .detail a:hover strong {
    text-decoration: underline;
}
table.eventsMedium .detail a strong img {
    display: inline;
    float: left;
    margin: 3px 0 5px -75px;
}
table.eventsMedium .detail a .calSheet {
    display: inline;
    float: left;
    margin: 0 0 5px -38px;
}

table.eventsMedium tr.attending td,
table.eventsMedium tr.maybeattending td {
    background: #e8f1f8;
}
table.ownEventsMedium tr.attending td,
table.ownEventsMedium tr.maybeattending td {
    background: transparent;
}
table.eventsMedium tr.recommended td {
    background: #f2f2f2;
}
table.eventsMedium tr.highlight td {
    background: #f8ece9;
}

table.eventsMedium tr td.location {
    width: 160px;
    color: #666;
}

table.eventsMedium tr td.location .country-name {
    display: block;
}

table.eventsMedium tr td.location a {
    color: #666;
    font-size: 12px;
}

table.eventsMedium tr td.info {
    width: 110px;
}

table.eventsMedium tr td.users {
    width: 100px;
}

table.eventsMedium td.icon {
    width: 15px;
    padding-right: 0;
}

table.eventsMedium tr td.info img {
    display: none;
}

table.eventsMedium div.geo {
    display: none;
}

table.eventsMedium tr.sponsored td.detail div {
    position: absolute;
    left: 15px;
    height: 1.5em;
    margin-top: -2.3em;
}

table.eventsMedium p.sponsored {
    background-color: #C7E5FD;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 5px;
}

table.eventsMedium tr.sponsored td {
    padding-top: 2.9em; /* normal 0.6em padding + height of sponsored div */
}

table.eventsMedium tr.sponsored td.icon {
    padding-top: 3.1em;
}

/* overrides */

table.eventsNoBorder,
table.eventsNoBorder td {
    border: 0;
}

table.tracklist {
    clear: both;
    width: 100%;
    color: #666;
    font-size: 11px;
    line-height: 1.5em;
}

table.tracklist .play_icon {
    margin: 0;
}

table.tracklist tbody tr:hover,
table.tracklist tbody tr.open {
    background: #bfdff4;
}

table.tracklist th,
table.tracklist td {
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    color: #000;
}

table.tracklist th {
    white-space: nowrap;
    padding-top: 15px;
}

table.tracklist th.title {
    padding: 10px 0 8px;
    color: #1b1b1b;
    font-size: 12px;
    font-weight: bold;
}

table.tracklist tr.last td {
    border-bottom: none;
}

table.tracklist tr.odd {
    background-color: #ebebeb;
}

table.tracklist td.imageSmall {
    width: 34px;
    padding: 5px;
}

table.tracklist td.imageMedium {
    width: 64px;
    padding: 5px;
}

.js table.tracklist td.album .hiddenAlbum {
    display: none;
}
.no-js table.tracklist td.album .showFurtherAlbums {
    display: none;
}

table.tracklist td.playbutton,
table.tracklist td.playbuttonCell {
    width: 17px;
    padding: 3px 0 0 3px;
}

table.tracklist td.lovedCell {
    padding: 5px 5px 0 0;
    width: 11px;
}

table.tracklist .loved_indicator_icon {
    margin-top: 2px;
}

table.tracklist td.tagged,
table.tracklist td.taggedCell {
    padding-top: 9px;
    padding-bottom: 0;
    width: 15px;
}

table.tracklist td.deleteCell {
    width: 14px;
    padding-bottom: 0;
}

table.tracklist td.subjectCell {
    color: #000;
    width: 100%;
}

table.tracklist .position {
    padding-right: 0;
}

table.tracklist .position,
table.tracklist .length,
table.tracklist .playcount {
    text-align: right;
}

table.tracklist .smallmultibuttonCell {
    padding: 3px 5px 0 0;
    width: 26px;
}

table.tracklist td.downloadbuttonCell {
    padding-top: 3px;
    padding-bottom: 0;
    width: 15px;
}

table.tracklist a.lfmButton,
table.tracklist a.delete,
table.tracklist .dismiss {
    position: relative;
    left: -9999px;
}

table.tracklist a.lfmFreeDownloadButton,
table.tracklist tr:hover a.lfmButton,
table.tracklist tr.open a.lfmButton,
table.tracklist tr:hover a.delete,
table.tracklist tr:hover .dismiss {
    left: 0;
}

table.tracklist td.border {
    border-left: 1px solid #ccc;
}

table.tracklist a {
    color: #000;
}

table.tracklist a:hover {
    color: #0187c5;
}

table.tracklist a.mp3 {
    display: block;
    width: 3em;
    margin-top: 2px;
    padding: 2px 4px 1px 4px;
    border-radius: 4px;
    background: #0187c5;
    color: #fff;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
}

table.tracklist a.mp3:hover {
    text-decoration: none;
}

table.tracklist td.imageCell {
    padding: 0;
}

table.tracklist td.imageCell img {
    display: block;
    float: left;
}

table.tracklist td.dateCell {
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    color: #999;
    white-space: nowrap;
    font-size: 10px;
}

table.tracklist td.highlight {
    border-top: 1px solid #ccc;
    background: #fffcca;
}

.unknownTimestamp,
.unknownAlbum,
#timestampExplanation {
    color:#666;
}
#timestampExplanation {
    margin-top:0.5em;
    margin-left: 2.7em;
    font-size: 11px;
}

table.tracklist .showFurtherAlbums a, 
table.tracklist .showFewerAlbums a {
    color:#666;
}
table.tracklist .showFewerAlbums {
    display: none;
}


fieldset.addDialogPlaylist {
    padding: 10px;
}
fieldset.addDialogPlaylist label {
    display: block;
    margin: 5px 0;
}

.buyDialog a.button {
    display: inline;
    float: right;
    width: 50px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}
.buyDialog a.button:hover {
    border-color: #505050 #404040 #2d2d2d #404040;
    font-weight: bold;
    background: #515151 url(http://cdn.lst.fm/flatness/buttons/5/confirm_button.png) 0 0 repeat-x;
    text-shadow: #515151 0 -1px 1px;
}
.buyDialog small.price {
    display: inline;
    float: right;
    margin: 2px 5px;
}
.buyDialog ul.buyChoices li {
    clear: right;
    margin-bottom: 8px;
}
.buyDialog ul.buyChoices a.icon img {
    display: inline;
    float: left;
    margin-right: 5px;
}       

.multiBuyDialog .dialogContent {
    overflow: auto;
}

.multiBuyDialog table td {
   padding: 1px 5px;
}

.multiBuyDialog table .odd td {
    background: #eee;
}

.multiBuyDialog table .price {
    text-align: right;
}

.multiBuyDialog table .found.track {
    font-weight: bold;
}

.multiBuyDialog table .notFound {
    color: #999;
}

.multiBuyDialog .dialogButtons {
    position: relative;
    color: #999;
    zoom: 1;
}

.multiBuyDialog .dialogButtons span {
    float: left;
}


.deprecationDialog {
    padding: 0 0 0 50px;
    background: url(http://cdn.lst.fm/flatness/listen_v2/error_big.png) left top no-repeat;
    font-size: 12px;
    line-height: 1.333333em;
}

.deprecationDialog ul {
    padding: 0 0 1em 15px;
    list-style: disc outside;
}

.dialogBox {
    border: 5px solid #333;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 10px #333;
}

.dialogBox.add {
    border-color: #1c6ca4;
}
.dialogBox a.dialogStatus {
    display: block;
    float: right;
    width: 16px;
    height: 16px;
    margin: 5px;
    text-decoration: none;
    background: url('http://cdn.lst.fm/flatness/buttons/delete.2.png') no-repeat 50% 50%;
}
.dialogBox a.dialogBusy {
    background-image: url('http://cdn.lst.fm/flatness/spinner_small.gif');
}
.dialogBox a.dialogFailure {
    background-image: url('http://cdn.lst.fm/depth/forms/incorrect_new.gif');
}
.dialogBox a.dialogStatus:hover {
    background-image: url('http://cdn.lst.fm/flatness/buttons/delete.2.png');
}

.dialogBox h3 {
    margin: 0;
    padding: 5px 15px;
    background: transparent;
    border-bottom: 1px solid #aaa;
    font-size: 15px;
}
.dialogBox h3:hover {
    cursor: move;
}
.dialogBox .dialogContent {
    padding: 15px;
}
.dialogBox .dialogContent p {
    margin:0.5em 0 0 0;
}
.dialogBox h5 {
    margin: 0.5em 0 0.3em 0;
    font-size: 11px;
}

.dialogBox textarea {
    width: 100%;
    height: 150%;
}

.dialogBox .dialogExtra {
    padding: 0 0.5em 0.5em 0.5em;
}
.dialogBox .dialogExtra h5 {
    text-transform: uppercase;
}

.dialogBox .dialogForm {
    clear:both;
}
.dialogBox .dialogButtons {
    clear: both;
    border-top: solid 1px #aaa;
    padding: 10px 15px;
    background: #eee;
    overflow: hidden;
    text-align: right;
}

.noDialogButtons .dialogButtons {
    display: none;
}

.dialogBox .dialogButtons input.dialogConfirm {
    margin-left: 8px;
}

/* FOD */

.fodDialog {
    background: #faf8df;
    border: 3px solid #ccc;
}
.fodDialog form {
    padding: 0.5em 1em;
    text-align: left;
    font-size: 11px;
}
.fodDialog span.track {
    color: #000;
}
.fodDialog h4 {
    margin: 1.5em 0 0 0;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.fodDialog input.dialogButton {
    border: 1px solid #8b8b83;
    background: #f2f2f2 url(http://cdn.lst.fm/depth/homepage_960/signupbutton.gif) repeat-x 0 50%;
    color: #545454

}
.fodDialog input.dialogButton:hover {
    color: #222;
}
.fodDialog input.dialogConfirm {
    width: 224px;
    height: 31px;
    margin: 15px 0 15px 57px;
    padding: 2px 0;
    font-size: 16px;
    text-align:center;
}
.fodDialog input.dialogCancel {
    padding: 2px 10px;
    float:right;
}

/* Resource rep */

.dialogBox fieldset.resource,
.dialog-attachment {
    margin: -15px 0 15px 0;
    padding: 15px;
    border: 1px solid #e7e7e7;
    border-top: 0;
    background: #f2f2f2;
}
.dialogBox fieldset.resource .resource {
    padding: 0;
    margin-bottom: 0;
}

.dialog-attachment h4 {
    font-weight: normal;
}

/* Success */

.dialogBox div.successScreen {
    padding: 150px 0 60px;
    background-image: url("http://cdn.lst.fm/flatness/giant_success_tick.png");
    background-position: center 50px;
    background-repeat: no-repeat;
    text-align: center;
}

.ie6 .dialogBox div.successScreen {
    background-image: url("http://cdn.lst.fm/flatness/giant_success_tick.gif");
}

.dialogBox div.successScreen h4 {
    font-size: 15px;
    margin: 1em 0 0 0;
    font-weight: bold;
}

.dialogBox div.successScreen a {
    color: #4185ce;
}

/* upload image dialog */


.upload .uploading {
    margin: 9px 0 0 0;
}


.dialogBox div.upsell {
    margin: 1em 0 0em;
    font-size: 11px; 
    color: #666
} 

.dialogBox .reveal {
    padding-bottom: 1em;
    text-align: right;
}

.interstitial {
    background: #000;
    color: #fff;
}

.interstitial a {
    color: #fff;
    text-decoration: underline;
}

.interstitial h3 {
    border: none;
    font-size: 24px;
}

.lfmBlack #page .interstitial h3,
.lfmBlack #page .interstitial h3 a {
    color: #fff !important;
}

.interstitial h4 {
    font-size: 18px;
    margin: 2em 0 1em;
}

.interstitial .dialogButtons {
    background: none;
    border: none;
}

.interstitial .mp3com ol {
    list-style: decimal inside;
}

#flagging-actions label {
    display: block;
    margin: 10px 0 0 0;
    color: #666;
    font-size: 11px;
}

#flagging-actions textarea,
#flagging-actions input {
    width: 98%;
}


.dialogBox.labsfeedback label {
    display: block;
    margin-bottom: 5px;
}

.dialogBox.labsfeedback label input {
    margin-right: 5px;
}

.dialogBox.labsfeedback textarea {
    width: 362px;
}

.moderationvote .options li {
    margin: 0 0 7px 0;
    padding-left: 20px;
}

.moderationvote .options input.radio {
    margin-left: -20px;
    float: left;
    display: inline;
}

.moderationvote .options ul li {
    margin: 7px 0 0 0;
    padding: 0;
}

.moderationvote .messageBox {
    margin-top: 0;
}

/* lots and lots of fiddly stuff for IE here */

.module {
    position: relative;
}

.fiflufi .leftCol .module {
    margin-top: 30px;
}

.ie6 .module {
    zoom: 1;
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.ie7 .module {
    margin: 30px 0;
}

#page div.fiflufi div.leftCol div.module h2.heading {
    margin-top: 0;
}

.module .moduleDropDown {
    position: absolute;
    top: -2px;
    right: 0;
}
.module .moduleButtons {
    position: absolute;
    top: -2px;
    right: 0;
    font-size: 11px;
}

.no-js .moduleButtons {
    display: none;
}

#page .module .moduleButtons {
    top: 15px;
}

.a-charts #page .module .moduleButtons {
    top: -2px;
}

.ie6 .module .moduleDropDown,
.ie6 .module .moduleButtons {
    right: 15px;
}

.module .moduleButtons a {
    color: #666;
}

.ie6 .module .moduleButtons img {
    vertical-align: middle;
}

.ie7 .module .moduleButtons img {
    vertical-align: middle;
}

.feedDialog h3 small,
.embedDialog h3 small,
.modulePreferences h3 small {
    font-size: 15px;
    color: #999;
}

.modulePreferences fieldset {
    margin-bottom: 10px;
}

.embedDialog .infoMessage,
.modulePreferences .infoMessage {
    background: #fdf7c1;
    padding: 5px 7px 7px 7px;
    font-size: 11px;
    line-height: 1.181818em;
    margin-bottom: 0;
}

.embedDialog .infoMessage {
    margin-top: 0;
    margin-bottom: 15px;
}

.embedDialog .infoMessage .messageWrapper,
.modulePreferences .infoMessage .messageWrapper {
    background: transparent;
    padding: 0;
}

.modulePreferences ul.formOptions {
    display: block;
}

.modulePreferences ul.formOptions li {
    display: block;
    padding-left: 185px;
    overflow: hidden;
    margin: 0 0 7px 0;
}

.modulePreferences ul.formOptions li label {
    float: left;
    display: inline;
    margin-left: -185px;
    width: 170px;
    text-align: right;
}

.feedDialog select,
.modulePreferences select {
    margin-left: 12px;
}

.modulePreferences ul.formOptions li select {
    margin-left: 0;
}

.embedDialog ul {
    float: left;
    width: 185px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.181818em;
}

.embedDialog li {
    margin: 0 0 0.636364em 0;
}

.embedDialog li img {
    vertical-align: text-bottom;
    position: relative;
    margin-right: 4px;
}


#page .notificationDialog {
    border: 0;
    background: #050505;
    color: #fff;
    opacity: 0.9;
    -moz-border-radius: 0;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
}
#page .notificationDialog .dialogContent {
    padding: 5px;
}
#page .notificationDialog .dialogButtons {
    display: none;
}
#page .notificationDialog ul.minifeedSmall {
    padding: 10px;
}
#page .notificationDialog ul.minifeedSmall li {
    border-bottom: 0;
}
#page .notificationDialog .brand {
    float: right;
    width: 88px;
    margin: 10px 0 10px 5px;
    padding: 0 0 0 5px;
    border-left: 1px solid #838383;
}
#page .notificationDialog .brand img {
    display: block;
}
#page .notificationDialog .brand img.sponsored {
    margin-bottom: 2px;
}
#page .notificationDialog a {
    color: #4BA3D2;
}

#page .notificationDialog a.dialogStatus {
    background-image: url('http://cdn.lst.fm/promotions/close.png');
}

.radioProblemDialog {
    padding: 0 0 0 50px;
    background: url(http://cdn.lst.fm/flatness/listen_v2/error_big.png) left top no-repeat;
    font-size: 12px;
    line-height: 1.333333em;
}

.radioProblemDialog ul {
    padding: 0 0 1em 15px;
    list-style: disc outside;
}

#respickerTabs {
    float:left;
    width: 360px;
    padding: 0 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #363636;
    line-height: 1;
}

#respickerTabs li {
    float: left;
    margin-left: -1px;
    padding: 4px;
    width: 58px;
    border: 1px solid #d0d0d0;
    border-bottom: 0;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

#respickerTabs li.selected {
    position: relative;
    border-color: #363636;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.typePanel {
    clear: left;
    padding: 10px;
    line-height: 2;
}
.typePanel ul {
    margin: 0;
    padding: 0;
}
.typePanel label {
    padding: 5px 0;
}
.typePanel input[type='text'] {
    vertical-align: middle;
    border: 1px solid #999;
    padding: 4px;
    font-size: 11px;
}
.typePanel input[type='submit'] {
    vertical-align: middle;
    padding: 2px;
    border: 1px solid #ddd;
    outline: 1px solid #555;
    border-color: #eee #aaa #aaa #eee;
    outline-color: #999 #eee #eee #999;
    color: #333;
    background: #f0f0f0;
    font-size: 11px;
    cursor: pointer;
}
.typePanel input[type='submit']:hover {
    border-color: #ccc #999 #999 #ccc;
    outline-color: #666 #ccc #ccc #666;
}
.typePanel input[type='submit']:active {
    background: #ddd;
}

.typePanel span.statusHolder img {
    vertical-align: middle;
    margin-left: 5px;
}

#respickerTypes .results ul {
    float:left;
    margin: 10px 0 20px 0;
    padding: 2px 0;
    border: 1px solid #c0c0c0;
    background: #fff;
}
#respickerTypes .results li {
    float: left;
    width: 340px;
    margin: 0 2px;
    padding: 2px;
    border: 0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
#respickerTypes .results li.last {
    border-bottom: 0;
}

#respickerTypes .results li img {
    float: left;
    border: 1px solid #C0C0C0;
    margin: 0 5px 0 0;
}
#respickerTypes .results li.selected {
    -webkit-border-radius: 0;
    -moz-border-radius: 0px;
    background: #ccc;
    border-color: #ddd;
}
#respickerTypes .results li.selected img {
    border: 1px solid white;
}
#respickerTypes .active li.selected {
    color: #fff;
    border-color: #0060e9;
    background: #0060e9;
}

ul#otherTypes li.radioOption {
    width: 340px;
    float: left;
    border: 5px solid #fff;
    cursor: pointer;
}
ul#otherTypes li.selected {
    border-color: #d2d2d2;
    background: #d2d2d2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
ul#otherTypes li.radioOption input,
ul#otherTypes li.radioOption label {
    vertical-align: middle;
    margin-right: 0.3em;
}
ul#otherTypes .results li {
    width: 332px;
}

.dialogBox ul.saveElsewhere {
    display: inline;
    float: left;
    margin: 5px 0 0 -5px;
}
.dialogBox ul.saveElsewhere li {
    display: inline;
    margin: 0 0.3em;
    list-style: none;
}

table.emailshare {
    width: 100%;
}
table.emailshare th {
    padding: 5px 5px 5px 0;
}
table.emailshare td {
    padding: 5px 0 5px 5px;
}
table.emailshare th {
    width: 100px;
    text-align: right;
}
table.emailshare td p {
    font-size: 10px;
    color: #666;
}
table.emailshare td span.recipcount {
    float: right;
}
table.emailshare input,
table.emailshare textarea {
    display: block;
    width: 252px;
    font-size: 11px;
    color: #333;
}

table.emailshare textarea {
    height: auto;
}

.dialogBox fieldset.sendMessage {
    margin: 1em 0 0 0;
}
.dialogBox fieldset.sendMessage textarea {
    height: 5em;
    margin: 0.5em 0 0 0;
    font-size: 12px;
    width: 362px;
}

.dialogBox ul.saveElsewhere {
    display: inline;
    float: left;
    margin: 2px 0 0 0;
}
.dialogBox ul.saveElsewhere li {
    display: inline;
    margin: 0 10px 0 0;
    list-style: none;
}
.dialogBox ul.saveElsewhere li img {
    margin: 0 0 -2px 0;
}

.publicShare {
    clear: both;
    margin: 20px 0 -5px 0;
    font-size: 11px;
    color: #666;
    text-align: left;
}

p.publicShareCheckbox input,
p.publicShareCheckbox label,
p.publicShareCheckbox a {
    vertical-align: middle;
}
div.publicShareHelp {
    margin: 5px 0;
    background: #ffd;
}

div.progressBar {
    width: 300px;
    height: 10px;
    margin: 10px 0 0 0;
    border: 1px solid #1b1b1b;
    padding: 2px;
}

div.progressBar div {
    width: 0;
    height: 10px;
    background-color: #666;
}

div#content h2 {
    position: relative;
    top: 10px;
    margin-bottom: 20px;
    font-size: 22px;
}

div#content .unsubscribe h2 { 
    position: static; 
    margin-bottom: 10px;
}


div#content {
    line-height: 18px;
    padding-bottom: 10px !important;
}

table.form td {
    padding: 5px;
}
table.form tr.heading td {
    padding-left: 0;
}
table.form tr.group td.element label {
    padding: 0 15px 0 3px;
}
table.form tr.text td.element input {
    width: 200px;
}
table.form tr.button td input {
    margin: 0 0 0 5px;
}
table.form tr.requirednote td,
table.form tr.static td.element .fieldNote {
    font-size: 11px;
    line-height: 14px;
    color: #666;
    padding-top: 0;
}
table.form tr.static td.element .fieldNote {
    display: block;
    margin: -7px 0 0;
}
table.form tr.requirednote td span.required {
    display: inline-block;
    margin-left: 5px;
}

.unsubscribe { 
    max-width: 527px; 
    margin: 24px auto 10px; 
}

.unsubscribe p { 
    margin-bottom: 12px; 
}

.unsubscribe #doUnsubscribe { 
    display: block;
    padding: 5px 8px;
    margin-bottom: 24px;

}

div.infoBox,
p.infoBox,
ul.infoBox {
    font-size: 10px;
    padding: 3px 5px;
    background: #EEF6FF;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    margin: 10px 0;
    padding: 3px 5px;
    color: #313131;
    font-style:italic;
}

div.infoBox ul li {
    list-style-type: square;
    margin-left: 20px;
}

/* forms. todos */

input[type = checkbox],
input[type = radio] {
    margin: 0 5px 0 0;
}

textarea {
    font-size: 11px;
    width: 100%;
    height: 80px;
    overflow: visible;
}

select {
    border:1px solid #BBBBBB;
    padding:3px;
}

small.lfmlight {
    color: #777;
}

table.form td.label {
    padding-left: 0;
}

/** Applications & labs */

ul.applications,
ul.enabled-labs {
    width: 70%;
    margin: 15px 0 15px;
}

ul.applications li,
ul.enabled-labs li {
    clear: both;
    position: relative;
    margin: 0 0 15px 0;
    padding: 5px 150px 5px 45px;
    border-bottom: 1px solid #ccc;
}

ul.enabled-labs li {
    padding-left: 5px;
}

ul.applications li div.logo {
    display: inline;
    margin: 2px 15px 0 -40px;
    float: left;
    min-height: 35px;
}

ul.applications li form {
    position: absolute;
    top: 5px;
    right: 5px;
}

ul.enabled-labs li form {
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -10px;
}

ul.focusedApplication li {
    background: #fffcca;
    border: 1px solid #ccc;
}


ul.allApplications  li:last-child { 
    border-bottom: none;
}

/* Notifications */
.notifications form>ul>li { 
    margin-top: 20px;
}

.notifications ul { 
    margin-bottom: 10px; 
}

.notifications li li, .notifications li p { 
    margin-left: 20px;
}

.notifications label.section { 
    font-weight: bold;
}

.notifications ul.subsection { 
    margin-top: 1em;
}

.notifications .never-email { 
    margin: 20px 0 30px 0; 
}

.notifications input { 
    margin-right: 7px;
}

/* subscription page */

table#currentSubscription {
    margin-bottom: 15px;
}

table#currentSubscription th {
    font-size: 11px;
    color: #999;
    border-bottom: 1px solid #ccc;
    padding: 0 0.5em;
}

table#currentSubscription td {
    font-size: 11px;
    background: #E4F0FE;
    line-height: 25px;
    border-bottom: 1px solid #ccc;
    padding: 0 0.5em;
}

#cancelButton {
    display: inline;
    float: right;
    margin-top: -2.2em
}

table.history td.active {
    background: #E4F0FE;
}
    

table.history {
    margin-bottom: 30px;
}

table.history th {
    font-size: 11px;
    color: #999;
    border-bottom: 1px solid #ccc;
}

table.history th,
table.history td {
    padding: 0 0.5em;
    border-right: 1px solid #ccc;
}

table.history .currency {
    width: 5%;
    border-right: 0;
    text-align: center;
}

table.history td {
    font-size: 11px;
    line-height: 25px;
    border-bottom: 1px solid #ccc;
}

table.history tr.odd td {
    background: #f5f5f5;
}

table.history tr.pending td {
    color: #909090;
}

table.history .id {
    text-align: right;
    width: 10%;
    color: #909090;
}

table.history td.date {
    font-weight: bold;
}

table.history td.amount {
    text-align: right;
    width: 10%;
    padding-right: 2em;
}

table.history tr.balance td {
    font-weight: bold;
}

#paymentCheck {
    padding: 15px 15px 15px 48px;
    margin: 0 0 1em 0;
    background: #d6ebcc url('http://cdn.lst.fm/flatness/messageboxes/success.png') no-repeat 15px 15px;
}

#page .pendingPayment {
    background: #efefef url('http://cdn.lst.fm/flatness/subscribe/processing_spinner_grey.gif') no-repeat 15px 15px;
}

#page .failedPayment {
    background: #ffeacc url(http://cdn.lst.fm/flatness/messageboxes/error.png) no-repeat 15px 15px;
}

#farewell {
    margin: 10em auto;
    width: 500px;
}

#farewell h1,
#farewell p {
    margin: 15px 0;
}
#farewell h1 {
    margin-top: 30px;
}

/* autocomplete */

input#locationAutocomplete {
    width: 200px;
}
.autocomplete-w1 {
    position: absolute;
    top: 0;
    left: 1px;
}
.autocomplete-w1 .autocomplete-w2 {
    white-space: nowrap;
}
ul.autocomplete {
    width: 300px;
    font-size: 12px;
    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
    background: #ffffff;
    color: #000000;
    padding: 3px;
    border: 1px solid #bbbbbb;
    cursor: default;
    text-align: left;
    max-height: 200px;
    overflow-x: hidden;
}
ul.autocomplete li {
    padding: 2px 5px;
    cursor: pointer;
}
ul.autocomplete .selected {
    background: #0060e9;
    color: #ffffff;
}
ul.autocomplete .selected:hover {
    background: #5297FF;
    color: #ffffff;
}
ul.autocomplete strong {
    font-weight: bold;
    text-decoration: underline;
}

.form-wrapper {
    margin-bottom: 18px;
}

.no-enabled-labs {
    margin:25px 0;
    text-align: center;
}

.no-enabled-labs h3 {
    font-size: 110%;
}
